当前位置：文江博客话题详情

JQuery 表排序器问题

发布于 2024-07-08 11:31:42 字数 643 浏览 8 评论 0 原文

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

行未正确排序 (1, 1, 2183, 236)
总行数包含在排序中

关于 ( 2），我无法轻松地将总行移动到表页脚，因为 HTML 是由 displaytag< 生成的/a> 我对其控制有限的标签库。

关于（1），我不明白为什么排序不起作用，因为我使用了 tablesorter 教程。

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

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

提前致谢，大学教师

原文

I'm having a couple of problems with the JQuery tablesorter plugin. If you click on a column header, it should sort the data by this column, but there are a couple of problems:

The rows are not properly sorted (1, 1, 2183, 236)
The total row is included in the sort

Regarding (2), I can't easily move the total row to a table footer, because the HTML is generated by the displaytag tag library over which I have limited control.

Regarding (1), I don't understand why the sort doesn't work as I've used exactly the same JavaScript shown in the simplest example in the tablesorter tutorials.

In fact, there's only a single line of JS code, which is:

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

Thanks in advance,
Don

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝梦月影 2024-07-15 11:31:42

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

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

The first problem is due to the fact that the table sorter auto detects the column to a 'text'-column (probably because the empty cells). To solve this use this code to initialize the tablesorter and set all the field to either digit or currency depending on the data:

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

回复收藏 0 原文

旧人九事 2024-07-15 11:31:42

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

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

I would suggest using some Javascript to remove the last row from the table. Add a footer and then re-add the removed row from the table. To solve the issue with empty data in a numeric cell you may need to add your own custom parser.

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

回复收藏 0 原文

染年凉城似染瑾 2024-07-15 11:31:42

我认为问题 1 的答案是某些数字列有空白字段，导致表排序器将该列检测为“字符串”列。

回复收藏 0 原文

沫雨熙 2024-07-15 11:31:42

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

回复收藏 0 原文

一枫情书 2024-07-15 11:31:42

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

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

});

I found that the following will work with unrecognized numeric (digit) columns. It appears that 0 is considered text by the current version (2.0.3) of tablesorter.

Including the sample from tvanfosson, this script at the bottom of your page would move your last row from the footer which prevents it from being sorted with the data within tbody and would force the sorter to use a numeric sort rather than the text sort it is using as you described.

$(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'}
     }
  });

});

回复收藏 0 原文

倚栏听风 2024-07-15 11:31:42

tablesorter 插件的固定标头：

css

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

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>

fixed header for tablesorter plugin :

css

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

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>

回复收藏 0 原文

~没有更多了~

关于作者

浅唱々樱花落

暂无简介

0 文章

0 评论

23 人气

关注发私信

友情链接

文江博客

JQuery 表排序器问题

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

JQuery 表排序器问题

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

关于作者

相关话题

热门标签

推荐作者

留蓝

18790681156

zach7772

Wini

ayeshaaroy

初雪

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。