2016-03-21 14 views
1

jQuery DataTableで動的に作成された要素にアクセスしたいとします。 以下のコードを考えてみましょう:jQuery DataTable内の要素を取得する

$(document).ready(function() { 
    var tableref = $('#myTable').DataTable({ "pageLength": 10 }); 
    for (var k=0; k<15; k++) { 
    tableref.row.add(['<div id="myDiv' + k + '">'+k+'</div>']).draw(); 
    console.log(document.getElementById('myDiv'+k)); 
    } 

}); 

ページサイズが10に設定されているので、私は最初の10のdivをアクセスすることができます。次の5つの要素に対するコンソールの出力がヌルであることがわかります。

fiddle demo

なぜそれが起こるのでしょうか?どうすればこの問題を解決できますか?

+0

推測、あなた」は、この方法あなたのデータ注入のためにテーブルに(11-15)行を注入しないでください。 DOMを使用して動的に行を作成し、この後にデータを追加しようとする可能性があります。 – RPichioli

+0

リチャードの答えはどうですか?私はあなたが正確に何を意味するのか分かりません。コードを更新できますか? –

+0

質問は、これを行うことで何を本当に達成したいのですか?テーブルに新しい行を追加しますか? –

答えて

0

あなたがテーブルのすべての要素を取得したい場合は、rows().nodes()を使用することができますが、生成されたTR要素のリストを返します。あなたの例ではより多くの情報http://datatables.net/forums/discussion/7454/fngetnodes-only-returning-visible-nodes

ため

読む....

$(document).ready(function() { 
    var tableref = $('#myTable').DataTable({ "pageLength": 10 }); 
    for (var k=0; k<15; k++) { 
     tableref.row.add(['<div id="myDiv' + k + '">'+k+'</div>']).draw(); 
     //console.log(document.getElementById('myDiv'+k));//Return 10 divs 
    } 

    var aTR = tableref.rows().nodes(); 

    for (var i = 0; i < aTR.length; i++) { 

     console.log($(aTR[i]).find('div')); //return 20 divs 

    } 

}); 

結果:私はあなたが10に "PAGELENGTH" を設定しているため、それはですhttps://jsfiddle.net/cmedina/7kfmyw6x/22/

+0

ありがとうCMedina! –

0

datatablesオブジェクトのデータにアクセスする場合は、行全体を反復処理しないでください。参考のため

、このページをチェックアウト: https://datatables.net/reference/api/data()

+0

リチャードに感謝します。 'tableref.data()[k]'は '["

k
"]'私は確かに私が望んでいるか分からない。 div自体を取得するにはどうすればよいですか? –

関連する問題