Question

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

行未正确排序（1,1,218,236）
总行包含在排序

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

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

实际上，只有一行JS代码，即：

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

提前致谢，唐

Answer 1

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

<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>

Answer 2

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

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

Answer 3

我认为＃1的答案是你有一些数字列的空白字段，导致tablesorter将该列检测为“字符串”列。

Answer 4

空白字段可能是一个问题（例如它们不是0），尝试使用自定义解析器删除任何非数字并强制值为整数（例如：http://paste.pocoo.org/show/90863/）
将“总”行放在＆lt; tfoot＆gt;内＆LT; / TFOOT＆GT;在表格结尾之前标记

Answer 5

我发现以下内容适用于无法识别的数字（数字）列。看来0表示当前版本（2.0.3）的tablesorter。

包括来自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'}
     }
  });

});

Answer 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>

JQuery tablesorter问题

6 个答案: