1

テーブルを操作するために DataTables プラグインを使用しています。JSON オブジェクトをテーブルのデータソースとして設定し、このオブジェクトが変更されるたびにコンテンツを更新したいと考えています。

テーブルを初期化するには、次のコードを使用します。

     var obj = [];

     // if I make start initialization of the object - the row in a table appears.
     //var obj = [{"Name": "name1", "Id": "id1", "Value":"value1"}];

     var table;

        $(document).ready(function () {

            table = $('#example').dataTable({
                "sPaginationType": "full_numbers",
            "sScrollY": "250px",
            "aaSorting": [],
            "aaData": obj,
            "aoColumns": [
            { "mDataProp": "Name" },
            { "mDataProp": "Id" },
            { "mDataProp": "Value" }
        ]
        });
    }
    );

JSON オブジェクトを更新するには:

function updateObject() {
    var response = $.ajax({
        type: "GET",
        datatype: "json",
        url: myURL,
        success: function (result) {
            obj = jQuery.parseJSON(result);
            //table.fnDraw(); - tried this but it doesn't work
        }
    });
}

サーバーから取得した JSON データ:

 [{"Name": "name1", "Id": "id1", "Value":"value1"}, 
     {"Name": "name2", "Id": "id2", "Value":"value2"},...]

サーバーから新しいデータを取得した後でテーブルの内容を更新することはできますか?

アップデート：

table.fnClearTable();
table.fnAddData(obj, false);
table.fnStandingRedraw();

新しい行を挿入した後、現在のページが失われ、現在のスクロール位置も失われます。fnStandingRedrawメソッドは、ページの位置を維持するのに役立ちます。しかし、スクロールは最初の行にジャンプします。現在のスクロール位置を計算して、更新後にジャンプして戻る方法はありますか ( http://datatables.net/docs/Scroller/1.0.1/ ) またはその他の解決策はありますか?

4

2 に答える 2

1

これはあなたを助けることができると思います。最初にすべてのデータを削除し、新しいデータを再度追加する必要があります。ドキュメントはこちら

table.fnClearTable().fnAddData(obj);
于 2013-03-20T12:04:39.477 に答える
0

同様のシナリオがありました。だから最終的に私はこのように解決しました：

function UpdateDatatable(data, $table) {
    $.ajax({
        type: "GET",
        dataType: "JSON",
        url: "../biz/datahandler.ashx",
        data: ({data: data}),
        async: true,
        error: function (xhr, ajaxOptions, thrownError) {
            /* manage the error */
        },
        success: function (dataget) {
            /* maange the success */
            $table.dataTable({
                ...
            })
    });
}
于 2013-03-20T12:11:29.320 に答える