如何使jQuery表分类器始终对最后一列进行排序?

时间:2017-02-07 16:08:33

标签: jquery sorting tablesorter

我正在使用JQuery tablesorter v 2.0。我目前的设置是这样的

$("#myTable").tablesorter({
    sortList: [[4,0]]
}); 

但是如何设置默认排序顺序始终是表中的最后一列?对数字进行硬编码的原因可能并不理想,因为我会动态生成表数据,有时表会有五列,有时会有六列。

2 个答案:

答案 0 :(得分:1)

您可以计算表中的标题数,并使用它来获取最后一列索引。例如:

// Get the number of "th" within the first "tr":
var columnCount = $('table tr:first').children('th').length;

$("#myTable").tablesorter({
    sortList: [[columnCount - 1, 0]]
});

答案 1 :(得分:1)

您可以编写一个jQuery插件来计算给定表的表头数(也可以计算列跨度)。

以下示例数据来自docs使用入门部分。

(function($) {
  $.fn.colCount = function() {
    var colCount = 0;
    this.find('tr:first-child td').each(function () {
      colCount += $(this).attr('colspan') ? +$(this).attr('colspan') : 1;
    });
    return colCount;
  };
})(jQuery);

$(document).ready(function() {
  $('#myTable').tablesorter({
    sortList: [
      [$('#myTable').colCount() - 1, 0]
    ],
    theme : 'dropbox'
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.5/css/theme.dropbox.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.5/js/jquery.tablesorter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.5/js/jquery.tablesorter.widgets.min.js"></script>
<table id="myTable" class="tablesorter">
  <thead>
    <tr>
      <th>Last Name</th>
      <th>First Name</th>
      <th>Email</th>
      <th>Due</th>
      <th>Web Site</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Smith</td>
      <td>John</td>
      <td>jsmith@gmail.com</td>
      <td>$50.00</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>Bach</td>
      <td>Frank</td>
      <td>fbach@yahoo.com</td>
      <td>$50.00</td>
      <td>http://www.frank.com</td>
    </tr>
    <tr>
      <td>Doe</td>
      <td>Jason</td>
      <td>jdoe@hotmail.com</td>
      <td>$100.00</td>
      <td>http://www.jdoe.com</td>
    </tr>
    <tr>
      <td>Conway</td>
      <td>Tim</td>
      <td>tconway@earthlink.net</td>
      <td>$50.00</td>
      <td>http://www.timconway.com</td>
    </tr>
  </tbody>
</table>