2010-12-16 36 views
16

最新のtablesorterにちょうど更新され、壊れたものなどのように見えます。私は私のページを開こうとするたびに、Firebugのは言う:jQuery Tablesorterエラー

table.config.parsersを未定義

ですそして、それはちょうど私のJavascriptのすべてを壊します。 もし私がtablesorterのバージョンを元に戻すとうまくいくでしょう。

Javascriptを:

$("#List").tablesorter({ 
    widgets: ['zebra'], 
    headers: { 
     4: { sorter: false } 
    } 
}) 

HTML:あなたは<tbody>で空/無<tr>要素を持っていない、そしてそれは、少なくとも1 <tr>を期待しているため、

<table id="List" class="tablesort ui-widget-content ui-corner-top"> 
    <thead> 
     <tr class="ui-widget"> 
      <th>Pa&iacute;s</th> 
      <th>ISO</th> 
      <th>ISO3</th> 
      <th>CODE</th> 
      <th>&nbsp;</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 
+0

は、最新バージョンのドキュメントを通過...それはいくつかの関数のシグネチャが変更されている可能性がありますことがあります...か設定 – Vivek

+0

に基本的なものを使用しています...メインのtablesorter()関数を変更していませんでした。それは確かです:P – alexandre

+0

JavaScriptとhtmlは表示できますか? – Nalum

答えて

13

少し遅れたが、それはです。

+3

私たちが乗り越える方法の1つは、テーブルにデータがあるかどうかにかかわらず、ダミーので始まり、ドキュメントロード時にjs経由で隠すことです。 –

14

私はちょうどこのエラーが発生したので、誰かが後でそれに問題がある場合に備えて、回答を投稿すると思いました。

上記の答えには言及していませんが、最初にtablesorter()をインスタンス化し、次にソート要求をトリガーすることでエラーを再現できました。

AJAXを介して、またはそれ以外の場合はそうのような新しいデータで既存のテーブルのデータを追加または交換時にこのイベントの順序は必要であろう:

// populate our table body with rows 
$("#myTable tbody").html(json.tbody); 

// let the sorting plugin know that we made a update 
$("#myTable").trigger("update"); 

// set sorting column and direction, this will sort on the first and third column 
var sorting = [[2,1],[0,0]]; 

// sort 
$("#myTable").trigger("sorton",[sorting]); 

「更新」と「sorton」イベントの組み合わせがいるようですエラーを引き起こす可能性があります。 "sorton"イベントが処理されるまでに、DOMにはtable.config.parsersが割り当てられていないため、エラーになります。

"ソートン"イベント処理を1ミリ秒のタイムアウトでラップすることです。

は、以下でjquery.tablesorter.jsで既存の "sorton" バインド(ライン〜803)を置き換えます。

}).bind("sorton", function (e, list) { 
    var me = this; 
    setTimeout(function() { 
     $(this).trigger("sortStart"); 
     config.sortList = list; 
     // update and store the sortlist 
     var sortList = config.sortList; 
     // update header count index 
     updateHeaderSortCount(me, sortList); 
     // set css for headers 
     setHeadersCss(me, $headers, sortList, sortCSS); 
     // sort the table and append it to the dom 
     appendToTable(me, multisort(me, sortList, cache)); 
    }, 1); 

tablesorter()は本当に便利プラグインです。クリスチャンにリリースしてくれてありがとう。

0

誰かが同じシナリオを実行した場合の別の回答です。明らかに、テーブルソーターは、空の<tr>の中に空の数字の一致する数字(ヘッダ要素と同じ)を持つことを好むことがあります。私の部分的な例は、

<thead> 
    <tr> 
     <th class="{sorter: 'text'}'' "><a href="javascript:;" title="Sort" class="arrow"><span>Network Name</span></a></th> 
     <th class="{sorter: 'text'} "><a href="javascript:;" title="Sort" class="arrow"><span>Type</span></a></th> 
     <th class="{sorter: false}"><a href="javascript:;" title="Sort" class="arrow"><span>Interconnections</span></a></th> 
     <th class="{sorter: false}">&nbsp;</th> 
    </tr> 
</thead> 

<tbody> 
    <tr style="display:none"><td></td><td></td><td></td><td></td></tr>......................... 
1

を下回っている私は上記の回答のいくつかを試してみましたが、彼らは我々がtablesorterを使用していたすべてのページには助けにはなりませんでした。私がエラーのために考えた主な理由は、空のTRを持っているか、またはTHのTDと同じ数のTDがないために、c = sortList [i] [0]が未定義であるということです。

テーブルデータがある場合は8 TH/TD、表示する必要がない場合は8 TH &シングルTDがありました。私はテーブルデータがないかどうかをチェックして、存在しない特定の列を並べ替えるためにtablesorterを呼び出さないように管理しました。これはトリックでした。

if(tableData.length != 0){ 
 
    $("#myid").tablesorter({sortList: [[2,0]]}); 
 
}

+0

これは私を助けました。ありがとう! '.filter(function(){ return $(this)} .find(" tbody> tr ")。length> 0; })。tablesorter(....)'を使って、それらをフィルタリングしました。 (私は 'sortList'も使用していましたが、それが影響を与えるかどうかはわかりません)。 –

1

問題がテーブルではJavaScriptを経由して満たされている場合は、ブラウザが新しいコンテンツを表示していない限り、tablesorterは、新しいコンテンツを見つけられないということであるように思わ同様のシナリオで誰かを助けるかもしれません。

setTimeout()ルーチン内でtablesorterを起動すると、そのエラーが取り除かれました。

function initPage() { 
     fillMyTable(); 
     // Init table sorter, but give the browser a second to draw the new table 
     setTimeout(function(){ $("#my_table").tablesorter(); }, 1000); 
    } 
0

tablesorter AJAX exampleが唯一の新しい行は、既存のものにをを追加されるシナリオを示していることに注意してください。テーブルが動的に空になって新しい行で再充填されると、上記のエラーが発生します。 、テーブルは空と実行を再充填した後:

ヘッダ内<th> Sの数として<td> Sの同じ数と空の行

<tr style="display:none"><td></td>...<td></td></tr> 

の追加エラーを除去するが、互いに紹介します新しい行は古い行に追加されます。 tablesorterのソースコードを変更することの代替として

、次の呼び出しシーケンスを試してみてください。

$("#my-table").trigger("update"); 
setTimeout(function() { 
    /* e.g. sort by the second column in descending order */ 
    var sorting = [[1, 1]]; 
    $("#my-table").trigger("sorton", [sorting]); 
}, 100); 
関連する問題