DataTables jqueryまたはjavascriptで動的に追加する方法

Question

サイトでjQuery DataTableを使用していますが、別のハイパーリンクを押すたびにテーブル内のすべてのデータが変更されます。したがって、行を削除して1つずつ追加するのではなく、DataTable全体を動的に削除し、配列を持つすべてのデータを持つ別のデータを再作成する方法があります。

ここでコードは古い静的なものを計画していますが、動的に配列をフェッチする方法を知っています。配列はpython/cherryPyから戻ってくるようです： ar [n] = ["col1" 、 "COL2"、 "COL3"、 "COL4"、... "コルン"]：

以下のコードである（静的）HTMLにデータテーブルを作成するための静的コード...

<div id="div1" class="ctnr"> 
    <table id="mainTable1" class="dtable" cellpadding="3" cellspacing="1" border="0"> 
    <thead> 
     <tr><th>*</th><th>Proposal</th><th>Vote </th><th> For </th><th>dd</th><th>A</th></tr> 
    </thead> 
    <tbody id="tbdy"> 
     <tr id="zrow1" class="gradeX"><td><input id="ckb1" type="checkbox" class = "tb" /></td><td id="ppl1" class="ppsal" style="width:55%">BlaBlaBla</td><td>More BlaBlaBla</td><td class="ralign"> CheeCheeChee</td><td class="ralign"> ChooChoo...</td><td class="ralign"> LaLaLa</td></tr> 
    </tbody> 
    </table> 
</div> 

JavaScriptまたはjQueryでこれを行うにはどうすればよいですか？

デニス

Answer 1

DataTablesあなたは、彼らが「data sources」と呼ぶものを使用して、プログラムでテーブルの構造とデータを定義することができます。

ドキュメントにはいくつかの例があります。私は1つがあなたに合うかわからないんだけど、ここであなたが始めるのは、いくつかは以下のとおりです。

• DataTables dynamic creation example（JSの配列を使用しています）
• DataTables AJAX source example（AJAXを通じてJSの配列を使用しています）

the bDestroy() methodと組み合わせると、<table>タグの再作成を避けることができます。

異なるアプローチは、テーブルを再作成せずに行を再設定することです。私が知っているsetData（）メソッドはありませんが、同じ結果を得るにはfnClearTable()とfnAddData()メソッドを使用することができます。これらの方法については、DataTables API docsで詳しく読むことができます。

Answer 2

ハローに基づいて..

iはlaravelコントローラ...ループして動的にテーブルを作成中に、この機能を持っていた...私は...同じ問題を持っていたし、私はそれを解決する方法このでした$ APP_ID変数...と私はそれにデータテーブルを追加する必要がありました...実行時に...

public function getAppUserProfile(Request $request){ 
    $app_id = $request['appId']; 
    $configs = Userconfig::with('user')->where('config_id', $app_id)->get(); 
    $ct = 1; 
    $str = ''; 
    foreach($configs as $config){ 

      // $config->user->id, 
      $str .= '<tr><td>'. $ct.'</td><td>'. 
        $config->user->profile->first_name 
       .'</td><td>'. 
        $config->user->profile->first_name 
       .'</td><td>'. 
        $config->user->profile->first_name 
       .'</td></tr>'; 

      $ct++; 
    } 

    $tb = '<table id="testTable2" class="table table-striped table-bordered"><thead>'; 
    $tb .= '<tr><th>S/N</th><th>USER NAME</th><th>ASSIGN ROLE</th><th>Add</th></tr>'; 
    $tb .= '</thead><tbody>' . $str . '</tbody></table>'; 


    //return json_encode($configs); 

} 

$ strの機能が構築され、テーブルのデータを保持しているものです...と私はにテーブルをエコーページをjav_script_data_tbというidのdivタグに直接追加します。

function showAppUser() { 
    $('.loading').css('display', 'block'); 
    var appID = $('#app_search').val(); 
    $.ajax({ 
     method: 'get', 
     url: getauprofile, 
     data: {appId: appID} 
    }) 
     .done(function (result) { 
      // alert('success ' + result); 
      $('#panel_data_tb').html(result); 
      $('.loading').css('display', 'none'); 


      //this line here is what initializes the datatable on the 
      //current table just being created... 
      //dynamically.. and it worked. perfectly for me.. 
      //****************************************************** 

      $('#panel_data_tb').find('table').DataTable(); 

      //******************************************************* 


     }); 

} 

最後の行..は、Divタグ内のテーブルを見つけ、そのテーブルのdatatable（）プロパティを動的に初期化します。いつでもテーブルの内容を変更すると、作成されるダイナミックテーブルでデータテーブルが再初期化されます。

これは役に立ちます。ありがとう。