16

JQueryテーブルソータープラグインでいくつか問題が発生しています。列ヘッダーをクリックすると、この列でデータが並べ替えられるはずですが、いくつかの問題があります。

  1. 行が適切にソートされていません（1、1、2183、236）
  2. 行全体がソートに含まれます

（2）に関しては、HTMLは、制御が制限されているdisplaytagタグライブラリによって生成されるため、行全体をテーブルフッターに簡単に移動することはできません。

（1）に関しては、テーブルソーターのチュートリアルの最も単純な例に示されているのとまったく同じJavaScriptを使用したため、ソートが機能しない理由がわかりません。

実際、JSコードは1行しかありません。これは次のとおりです。

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

よろしくお願いします、ドン

4

6 に答える 6

23

最初の問題は、テーブルソーターが列を「テキスト」列に自動検出するという事実によるものです（おそらく空のセルが原因です）。これを解決するには、次のコードを使用して 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>
于 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

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 に答える