Question

我有这段代码：

HTML

<table id="table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
    ...
  </tbody>
</table>

SCRIPT

<script type="text/javascript">
  $("#table").tablesorter();
</script>

如何将特殊选择器添加到可排序列的标签？

Answer 1

喜欢这个

<强> DEMO

<强> SCRIPT

<script type="text/javascript">    
function SortableTableCtrl() {
        var scope = this;

        // data
        scope.head = {
            a: "Name",
            b: "Surname",
            c: "City"
        };
        scope.body = [{
            a: "Hans",
            b: "Mueller",
            c: "Leipzig"
        }, {
            a: "Dieter",
            b: "Zumpe",
            c: "Berlin"
        }, {
            a: "Bernd",
            b: "Danau",
            c: "Muenchen"
        }];

        scope.sort = {
            column: 'b',
            descending: false
        };

        scope.selectedCls = function(column) {
            return column == scope.sort.column && 'sort-' + scope.sort.descending;
        };

        scope.changeSorting = function(column) {
            var sort = scope.sort;
            if (sort.column == column) {
                sort.descending = !sort.descending;
            } else {
                sort.column = column;
                sort.descending = false;
            }
        };
    }
</script>

<强> DEMO2

Answer 2

喜欢这样吗？

我通过搜索tablesorter()

找到了jQuery plugin

$(document).ready(function() 
    { 
        $("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} ); 
    } 
);

如果您使用此插件，则可以设置背景颜色，如下所示：

$("#table").tablesorter().css('background-color','#f00');

Answer 3

您可以尝试我的fork of tablesorter，其中包含columns小部件，用于样式列。小部件将类名添加到列中的每个单元格，因此可以使用css完成样式设置。但是，对于非常大的表格，它变得相当慢。

$(function() {

  $("table").tablesorter({
    theme : 'blue',

    sortList : [[1,0],[2,0],[3,0]],

    // initialize zebra striping and column styling of the table
    widgets : ["zebra", "columns"],

    widgetOptions : {
      // change the default column class names
      // primary is the first column sorted, secondary is the second, etc
      columns : [ "primary", "secondary", "tertiary" ],
      // include thead when adding class names
      columns_thead : true,
      // include tfoot when adding class names
      columns_tfoot : true
    }

  });

});

查看demo here。

将样式添加到可排序列

3 个答案: