jquery - 使用 jQuery TableSorter 按多列对表进行排序

Question

我有一张表，目前正在使用以下代码进行排序：

$(document).ready(function () {
    $(".statisticstable").tablesorter({
        sortList: [
            [5, 0]
        ],
        textExtraction: function (node) {
            if ($(node).hasClass('data')) {
                return $(node).attr('value');
            } else {
                return $(node).html();
            }
        }
    });
});

这目前按第 5 列对表格进行排序，但是我正在尝试添加一个“最喜欢的行”功能，它强制将“喜欢”的行推到顶部，然后是排序列表的其余部分。

有没有办法做到这一点？

Answer 1

我认为您想要的与此 StackOverflow 问题的答案相同……基本上，用户选中行内的一个框，然后将其移至单独的 tbody 中。

<table id="fav" class="tablesorter">
  <thead>
    <!-- make checkbox column unsortable "sorter-false" -->
    <th class="sorter-false"></th>
    <!-- etc -->
  </thead>

  <!-- add an "info" only (non-sorting) tbody -->
  <tbody class="tablesorter-infoOnly"></tbody>

  <tbody class="all">
    <tr>
      <td><input type="checkbox" /></td>
      <!-- etc -->
    </tr>
    <!-- etc -->
  </tbody>
</table>

如果您希望对“最喜欢的”tbody 中的行进行排序，请删除tablesorter-infoOnly该类。

这是完整性的代码和演示

$(function() {

  var $table = $("#fav");
  $table.tablesorter({ sortList: [[0,0], [1,0]] });

  $table.on('click','input:checkbox', function() {
    var $this = $(this);
    if ($this.is(':checked')) {
      $this.closest('tr').prependTo("#fav tbody.tablesorter-infoOnly");
    } else {
      $this.closest('tr').appendTo("#fav tbody.all");
    }
    $this.trigger('update');
  });
});