jqueryを使用したカスタムデータテーブルの昇順および降順の並べ替え

Question

次のデータテーブルがあり、昇順および降順の各ソートがあります。 私は各大佐に並べ替えを追加したいが、そのが動作していないここで実施例である

http://jsbin.com/alawub/2/edit

をJames Padolsey

を "jQuery.fn.sortを" jQueryプラグインを使用しています他の代替ソリューションの上にある私のJSコードを見直してください。これは歓迎です。 http://www.kryogenix.org/code/browser/sorttable/

非常に使いやすく、セットアップ -

Answer 1

あなたは何回もクリックハンドラを追加している：

は

$('th') 
    .wrapInner('<span title="sort this column"/>') 
    .each(function(){ 
     ... 
     $('#accending_1,#accending_2').click(function(e){ 

これが何を行いますが、すべての目のためのものであり、4番目のタグの2行があると、ID accending_1を持つ要素にクリックハンドラを追加しますとaccending_2。それは各ボタンに8つのクリックハンドラを追加します！

これを解決する方法はたくさんあります。代わりに、各ボタンの使用クラスの特定のIDを有し、ヘッダにそれらが相対見つけるの：

$('th') 
    .wrapInner('<span title="sort this column"/>') 
    .each(function(){ 

     $('.accending', this).click(

example

注現在THの子孫にセレクタを制限し、最後の行にthisパラメータ。それでもTHの一番上の行を検索しています。

それはちょうどボタンに直接検索し、それらが何であるか、カラム動作するように、おそらく良いでしょう。

$('.accending, .accending') 
    .wrapInner('<span title="sort this column"/>') 
    .click(function(e){ 
     console.log("click"); 
     var th = $(this).closest('th'), 
     thIndex = th.index(); 
     table.find('td') 
     .filter(function(){ 
      return $(this).index() === thIndex; 
     }) 
     .sort(
      function(a, b){ 
      return $.text([a]) > $.text([b]); 
      }, function(){ 
      // parentNode is the element we want to move 
      return this.parentNode; 
      } 
     ); 
    }); 
    $('.decending, .decending') 

example

重複の多くは、コード、およびHTMLにまだあります。

クリックハンドラはほぼ同じです。ソート機能を渡すだけです。

//This function returns another function which is a click handler. 
    //It takes the sort function as a parameter. 
    function createClickHandler(sortFunction){ 
    return function(e){ 
     var th = $(e.target).closest('th'), 
     thIndex = th.index(); 
     console.log(th); 
     table.find('td') 
     .filter(function(){ 
      return $(this).index() === thIndex; 
     }) 
     .sort(sortFunction, function(){ 
      // parentNode is the element we want to move 
      return this.parentNode; 
      } 
     ); 
    }; 
    } 

    $('.accending, .accending') 
    .wrapInner('<span title="sort this column"/>') 
    .click(createClickHandler(function(a, b){ 
     return $.text([a]) > $.text([b]); 
     }) 
    ); 
    $('.decending, .decending') 
    .wrapInner('<span title="sort this column"/>') 
    .click(createClickHandler(function(a, b){ 
     return $.text([a]) < $.text([b]); 
     }) 
    ); 

example

HTMLは、ビットをクリーンアップすることができます。ボタンのタグはすべて同じですので、javascriptからクリックハンドラを追加する必要はありません。列ヘッダーをもう一度繰り返しているので、列番号の取得方法を整理することができます。最後に、2つの異なるソート関数を渡すのはちょっと無駄ですので、代わりに方向パラメータを渡しましょう。

//This function returns another function which is a click handler. 
    //It takes the sort function as a parameter. 
    function createClickHandler(column, isAccending){ 
    return function(e){ 
     table.find('td') 
     .filter(function(){ 
      return $(this).index() === column; 
     }) 
     .sort(function(a, b){ 
      var order = $.text([a]) > $.text([b]); 
      return isAccending ? order : !order; 
     }, function(){ 
      // parentNode is the element we want to move 
      return this.parentNode; 
     }) 
     ; 
    }; 
    } 

    $('#controls th').each(function(column,item){ 
    //Note we get the column index for for free with the each function 
    $(this) 
     .append($('<a title="sort this column" href="#">Ascending</a>') 
     .click(createClickHandler(column, true)) 
    ) 
     .append('&nbsp;&nbsp;') 
     .append($('<a title="sort this column" href="#">Decending</a>') 
     .click(createClickHandler(column, false)) 
    ) 
     ; 
    }); 

example

---

私は逆の変数を削除注意。それは決して使用されていませんでした。

return $.text([a]) > $.text([b]) 
    inverse ? -1 : 1 
    ; 

私はあなたが、これはやったと思ったかわからないんだけど、それは実際に起因するautomatic semicolon insertionに最初の行に戻っています。

return $.text([a]) > $.text([b]); 
    inverse ? -1 : 1; 

したがって逆はデッドコードです。それはJavaScriptの悪いビットの1つであり、非常に明白ではありません。 jsbinはセミコロンがないことを警告していました。ここにコードを提出する前に、常にエラー/警告を修正する価値があります。

Answer 2

私は本当にkryogenix.orgで "sorttable" スクリプトが大好きです。

Answer 3

私はあなたのコードの仕事をしました。ここでコードがある、また、あなたはjsbinでそれをテストすることができます。http://jsbin.com/alawub/15/

Javascriptを：

$(document).ready(function(){ 

    var $table = $('table'); 
    $table.on('click', 'th a.accending_1, th a.decending_1', function(e){ 
    var th = $(e.target).parent('th'), 
    thIndex = th.index(), 
    direction = $(e.target).attr('class').match('accending')?'A':'D', 
    sortDir = th.data('direction'+thIndex); 
    if(sortDir && sortDir == direction) return; 

     $table.find('td').filter(function(){ 
       return $(this).index() === thIndex; 
      }).sort(function(a, b){ 
       if(direction == 'D') 
        return $.text([a]) > $.text([b]) ? -1 : 1; 
       else 
        return $.text([a]) > $.text([b]) ? 1 : -1; 

      }, function(){ 
       // parentNode is the element we want to move 
       return this.parentNode; 
      }); 
     th.data('direction'+thIndex, direction); 
    }); 

}); 

HTML：（Aさんのちょうど修正クラス）jsbinオーバー

<th id="facility_header1"> 
     Table Header 1<br /> 
     <a href="#" class="accending_1">Accending</a>&nbsp;&nbsp; 
     <a href="#" class="decending_1">Decending</a> 
    </th> 
    <th id="facility_header2"> 
     Table Header 2<br /> 
     <a href="#" class="accending_1">Accending</a>&nbsp;&nbsp; 
     <a href="#" class="decending_1">Decending</a> 
    </th> 

の作業例：http://jsbin.com/alawub/15/

Answer 4

tablesorterは、必要な機能を提供していると思います。これは確かにテキストと数値の列を処理します。テーブルを動的に更新することには問題がありますが、優れた修正がありますhere。

Answer 5

JS Binで4件の警告が表示されました。 012. $ {text}（$）$ .text（[b]）---セミコロンがありません。
68行目：逆ですか？ -1：1 ---代入や関数呼び出しが必要で、代わりに式が見えました。
82行目：return $ .text（[a]）< $ .text（[b]）---セミコロンがありません。
行83：逆ですか？ 1：-1; ---代入や関数呼び出しが予想され、代わりに式が見えました。

これらのエラーを修正すると、期待した結果が得られることを願っています。