web-dev-qa-db-ja.com

ajaxを使用してテーブルのコンテンツを更新した後、データテーブルを再描画しますか？

Datatables を使用しており、AJAXを使用してテーブルを更新するボタンがページにあります。テーブルがデータのajaxソースを使用していないことを明確にするために、必要な場合にのみajaxを使用して更新します。 Ajaxは、テーブルがラップされているdivを更新しています。テーブルを再描画する必要があるため、ページネーションボタンとフィルタリング機能を失っていますが、これをテーブル初期化コードに追加する方法がわかりません。

データテーブルコード

var oTable6;
$(document).ready(function() {
    oTable6 = $('#rankings').dataTable( {
        "sDom":'t<"bottom"filp><"clear">',
        "bAutoWidth": false,
        "sPaginationType": "full_numbers",
        "aoColumns": [ 
            { "bSortable": false, "sWidth": "10px" },
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null
        ]

    });
});

Ajaxコードはこちら

$("#ajaxchange").click(function(){
    var campaign_id = $("#campaigns_id").val();
    var fromDate = $("#from").val();
    var toDate = $("#to").val();

    var url = 'http://domain.com/account/campaign/ajaxrefreshgrid?format=html';
    $.post(url, { campaignId: campaign_id, fromdate: fromDate, todate: toDate},
        function( data ) { 
            $("#ajaxresponse").html(data);
        });
});

私はこれを試しましたが、うまくいきませんでした

"fnDrawCallback": function() {
    function( data ) { 
        $("#ajaxresponse").html(data);
    };
},
jqueryajaxdatatables
25
Anagio

API関数を使用して、

  • テーブルをクリアします（fnClearTable）
  • テーブルに新しいデータを追加します（fnAddData）
  • テーブルを再描画する（fnDraw）

http://datatables.net/api

[〜＃〜] update [〜＃〜]

DOM Data Source （サーバー側処理用）を使用してテーブルを生成していると思います。私は最初はそれを本当に理解していなかったので、以前の答えはそれではうまくいきません。

サーバー側のコードを書き換えずに機能させるには：

行う必要があるのは、（dom内の）古いテーブルを完全に削除し、ajaxの結果コンテンツに置き換えてから、データテーブルを再初期化することです。

// in your $.post callback:

function (data) {

    // remove the old table
    $("#ajaxresponse").children().remove();

    // replace with the new table
    $("#ajaxresponse").html(data);

    // reinitialize the datatable
    $('#rankings').dataTable( {
    "sDom":'t<"bottom"filp><"clear">',
    "bAutoWidth": false,
    "sPaginationType": "full_numbers",
        "aoColumns": [ 
        { "bSortable": false, "sWidth": "10px" },
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null
        ]

    } 
    );
}
26
swatkins

次のようにbDestroy：trueを使用してデータテーブルを破棄してみてください。

$("#ajaxchange").click(function(){
    var campaign_id = $("#campaigns_id").val();
    var fromDate = $("#from").val();
    var toDate = $("#to").val();

    var url = 'http://domain.com/account/campaign/ajaxrefreshgrid?format=html';
    $.post(url, { campaignId: campaign_id, fromdate: fromDate, todate: toDate},
            function( data ) { 

                $("#ajaxresponse").html(data);

                oTable6 = $('#rankings').dataTable( {"bDestroy":true,
                    "sDom":'t<"bottom"filp><"clear">',
                    "bAutoWidth": false,
                    "sPaginationType": "full_numbers",
"aoColumns": [ 
        { "bSortable": false, "sWidth": "10px" },
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null
        ]

} 
);
            });

});

bDestroy：trueは、新しいセレクターを再初期化する前に、そのセレクターに関連付けられたデータテーブルインスタンスを最初に破棄します。

13
Keith.Abramo

理由はわかりません。しかし

oTable6.fnDraw();

私のために働く。次の行に入れます。

7
jairobg

これを使って：

var table = $(selector).dataTables();
table.api().draw(false);

または

var table = $(selector).DataTables();
table.draw(false);
4
Avram Cosmin

最新のDataTables（1.10以降）のユーザーの場合、このページのすべての回答と例は、新しいAPIではなく、古いAPIに関するものです。私は新しい例を見つけるのに非常に苦労しましたが、最終的に このDTフォーラムの投稿 （ほとんどの人にとってはDR; DR）を見つけ、それが この簡潔な例 につながりました。

Html文字列をすぐに囲む$（）セレクター構文にようやく気付いた後、サンプルコードが機能しました。文字列ではなくノードを追加する必要があります。

その例は実際に見る価値がありますが、SOの精神で、動作するコードのスニペットを見たいだけの場合：

var table = $('#example').DataTable();
  table.rows.add( $(
          '<tr>'+
          '  <td>Tiger Nixon</td>'+
          '  <td>System Architect</td>'+
          '  <td>Edinburgh</td>'+
          '  <td>61</td>'+
          '  <td>2011/04/25</td>'+
          '  <td>$3,120</td>'+
          '</tr>'
  ) ).draw();

注意深い読者は、1行のデータのみを追加しているので、table.row.add（...）も同様に機能するはずであり、私にとってもそうであることに気付くかもしれません。

2
Anne Gunn

初期化の使用：

"fnServerData": function ( sSource, aoData, fnCallback ) {
                    //* Add some extra data to the sender *
                    newData = aoData;
                    newData.Push({ "name": "key", "value": $('#value').val() });

                    $.getJSON( sSource, newData, function (json) {
                        //* Do whatever additional processing you want on the callback, then tell DataTables *
                        fnCallback(json);
                    } );
                },

そして、単に使用します：

$("#table_id").dataTable().fnDraw();

FnServerDataの重要なことは次のとおりです。

    newData = aoData;
    newData.Push({ "name": "key", "value": $('#value').val() });

aoDataに直接プッシュすると、テーブルを初めて描画するときに変更が永続的になり、fnDrawが希望どおりに動作しません。

1
laromicas

これは私のために働く

var dataTable = $('#HelpdeskOverview').dataTable();

var oSettings = dataTable.fnSettings();
dataTable.fnClearTable(this);
for (var i=0; i<json.aaData.length; i++)
{
   dataTable.oApi._fnAddData(oSettings, json.aaData[i]);
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
dataTable.fnDraw();
1
Imran Rashid

これは、ajaxによって取得されたデータをテーブルにフィードする方法です（これがベストプラクティスであるかどうかはわかりませんが、直感的でうまく機能します）。

/* initialise table */
oTable1 = $( '.tables table' ).dataTable
( {
    'sPaginationType': 'full_numbers',
    'bLengthChange': false,
    'aaData': [],
    'aoColumns': [{"sTitle": "Tables"}],
    'bAutoWidth': true
} );


 /*retrieve data*/
function getArr( conf_csv_path )
{
    $.ajax
    ({
        url  : 'my_url'
        success  : function( obj ) 
        {
            update_table( obj );
        }
    });
}


/* build table data */
function update_table( arr )
{        
    oTable1.fnClearTable();
    for ( input in arr )
    {
        oTable1.fnAddData( [ arr[input] );
    }                                
}
0
Igor L.