将条目插入 table 时触发 Tablesorter 以保持排序

Question

我有一个使用 table-sorter 的 table，当排序工作正常时，我遇到了 table 出现故障的情况。即，当条目添加到 table 时，table 不再排序。我如何触发 table-sorter 以使用点击处理程序保持其当前排序状态（即升序、降序）。

目前，我正在编写自己的排序算法来处理这种特殊情况，但如果存在 table-排序器解决方案，这似乎是一种浪费。

addEntry.click(function() {
    // code that triggers the sort again
});

Answer 1

您可以在添加新行后使用sortlist property when initializing the widget and trigger addRows。

在任何情况下，对于需要排序的列，您总是可以在 table header 上触发点击事件。

片段：

//
// set sort on first column in descending order and 
// on second column in ascending order
//
$("#myTable").tablesorter({ sortList: [[0,1], [1,0]] });
$('#addNewRow').on('click', function(e) {
    var newRow = $('<tr><td>z</td><td>a</td></tr>');
    $("#myTable tbody").append(newRow).trigger('addRows', [newRow, true]);
});

$('#sortOnFirstCol').on('click', function(e) {
    $("#myTable th:first").trigger('click');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/css/theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.1/js/jquery.tablesorter.min.js"></script>

<button id="addNewRow">Add new Row</button>
<button id="sortOnFirstCol">Sort on first column</button>
<table id="myTable" class="tablesorter">
    <thead>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Smith</td>
        <td>John</td>
    </tr>
    <tr>
        <td>Bach</td>
        <td>Frank</td>
    </tr>
    <tr>
        <td>Doe</td>
        <td>Jason</td>
    </tr>
    <tr>
        <td>Conway</td>
        <td>Tim</td>
    </tr>
    </tbody>
</table>

将条目插入 table 时触发 Tablesorter 以保持排序

Triggering Tablesorter to maintain sorting when an entry is inserted into the table

javascript

jquery

tablesorter