16

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

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

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

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

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

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

在此先感谢，唐

4

6 回答 6

23

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

<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>
于 2008-11-19T18:12:58.943 回答
8

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

   $(function() {
       $('#communityStats').append("<tfoot></tfoot>");
       $('#communityStats > tr:last').remove()
                                     .appendTo('#communityStats > tfoot');
       $('#communityStats').tablesorter();
   });
于 2008-11-19T18:10:22.007 回答
2

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

于 2008-11-19T18:00:48.000 回答
0

  1. 空白字段可能是一个问题（例如，它们不是 0），尝试使用自定义解析器删除任何非数字并将值强制为整数（例如： http: //paste.pocoo.org/show/90863/）

  2. 将您的“总计”行放在表格末尾之前的 <tfoot> </tfoot> 标记内

于 2008-11-19T18:04:05.453 回答
0

我发现以下内容适用于无法识别的数字（数字）列。当前版本（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'}
     }
  });

});
于 2009-05-19T18:27:08.610 回答
0

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>
于 2010-03-17T12:18:26.380 回答