使用jQuery TableSorter按多列排序表

时间:2013-11-04 02:55:32

标签: jquery html css sorting tablesorter

我有一个目前正在使用此代码排序的表:

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

这当前按第5列排序表,但是我试图添加一个“最喜欢的行”功能,它强制将“赞成”的行推到顶部,然后是其余的排序列表。

有没有这样做?

1 个答案:

答案 0 :(得分:1)

我认为你想要的是和this StackOverflow question的答案一样......基本上,用户检查行中的一个框,然后它被移动到一个单独的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>

如果您希望对“收藏夹”中的行进行排序,请删除tablesorter-infoOnly类。

这是代码&amp;完整性demo

$(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');
  });
});