jQuery表格排序问题答案

【问题标题】：JQuery tablesorter problemjQuery表格排序问题
【发布时间】：2010-09-23 02:20:28
【问题描述】：

我在使用 JQuery tablesorter 插件时遇到了一些问题。如果单击列标题，它应该按此列对数据进行排序，但是有几个问题：

行未正确排序（1、1、2183、236）
总行包含在排序中

关于 (2)，我不能轻易地将总行移动到表页脚，因为 HTML 是由我控制有限的 displaytag 标记库生成的。

关于 (1)，我不明白为什么排序不起作用，因为我使用了与 tablesorter tutorials 中最简单示例中所示完全相同的 JavaScript。

其实只有一行JS代码，就是：

<body onload="jQuery('#communityStats').tablesorter();">

提前致谢，唐

【问题讨论】：

标签： javascript jquery html sorting tablesorter

【解决方案1】：

第一个问题是由于表格排序器自动将列检测到“文本”列（可能是因为空单元格）。要解决此问题，请使用此代码初始化表格排序器并根据数据将所有字段设置为数字或货币：

<script type="text/javascript" >
jQuery(document).ready(function() 
{ 
    jQuery("#communityStats").tablesorter({ 
        headers: { 2: { sorter:'digit' } , 
                   3: { sorter:'digit' } ,
                   4: { sorter:'digit' } ,
                   5: { sorter:'digit' } ,
                   6: { sorter:'digit' } ,
                   7: { sorter:'digit' } ,
                   8: { sorter:'currency' } ,
                   9: { sorter:'currency' } ,
                   10: { sorter:'currency' } ,
                   11: { sorter:'currency' } 
                 } 
    }); 
});
</script>

【讨论】：

-1 矫枉过正。使用元数据并指定排序算法 tablesorter 应该使用内联更加优雅。请参阅下面的答案。
@Antony Trupe 但正如所讨论的那样，他是否可以控制将元数据放入由“displaytag”库生成的表 html 中
@The Village Idiot 然后他就完蛋了（即会有笨拙的代码）
如果你想单独设置这些东西，记得添加 jquery.metadata.js （单独的项目）。我相信文档中没有直接提及。
tvanfosson 的解决方案应该适用于 tfoot。 tablesorter() 也将 nn: { sorter:'date' } 识别为有效类型。

【解决方案2】：

我建议使用一些 Javascript 从表中删除最后一行。添加页脚，然后重新添加从表中删除的行。要解决数字单元格中的空数据问题，您可能需要添加自己的custom parser。

   $(function() {
       $('#communityStats').append("<tfoot></tfoot>");
       $('#communityStats > tr:last').remove()
                                     .appendTo('#communityStats > tfoot');
       $('#communityStats').tablesorter();
   });

【讨论】：

但它符合要求，不依赖于 OP 指示无法进行的服务器端更改。

【解决方案3】：

我认为#1 的答案是您有一些数字列的空白字段导致表格排序器将该列检测为“字符串”列。

【讨论】：

-1 没有解决办法，就是显式指定排序方式。看我的回答。

【解决方案4】：

空白字段可能是个问题（例如，它们不是 0），请尝试使用自定义解析器来删除所有非数字并将值强制为整数（例如：http://paste.pocoo.org/show/90863/）
将您的“总计”行放在表格末尾之前的
标记内

【讨论】：

【解决方案5】：

我发现以下内容适用于无法识别的数字（数字）列。当前版本 (2.0.3) 的 tablesorter 似乎将 0 视为文本。

包括来自 tvanfosson 的示例，页面底部的此脚本会将您的最后一行从页脚中移出，这会阻止它与 tbody 中的数据一起排序，并会强制排序器使用数字排序而不是文本按照您的描述对其使用进行排序。

$(document).ready(function() {
  $('#communityStats').append("<tfoot></tfoot>");
  $('#communityStats > tr:last').remove()
    .appendTo('#communityStats > tfoot');

  $("#communityStats").tablesorter({
     debug: true,
     headers: { 
       0:{sorter: 'digit'}
       ...
       10:{sorter: 'digit'}
     }
  });

});

【讨论】：

调试设置可以去掉，但它会帮助你看到代码设置为每列的解析器。如果您安装了 firebug，它会打印到控制台。

【解决方案6】：

tablesorter 插件的固定标头：

css

table.tablesorter thead {
position: fixed;
top: 35px; // 
}

JS

function tableFixedHeader() {
   var tdUnit = $('.tablesorter tbody tr:first').children('td').length;
   for(var i=0;i<tdUnit; i++) {
     $('.tablesorter thead th').eq(i).width($('.tablesorter tbody td').eq(i).width());
   }
   $('.tablesorter').css('margin-top',$('.tablesorter thead').height()); 
}

HTML

<div id="container">
   <div id="topmenu" style="height:35px;">some buttons</div>
   <div id="tablelist" style="width:100%;overflow:auto;">
      <table class="tablesorterw">.....</table>
   </div>
</div>

【讨论】：