99

画面上のボタンをクリックするとjQuerydataTableが更新される機能を実装しようとしています（dataTableの作成後にサーバー側のデータソースが変更された可能性があるため）。

これが私が持っているものです：

$(document).ready(function() {
    $("#my-button").click(function() {
        $("#my-datatable").dataTable().fnReloadAjax();
    });
});

しかし、これを実行すると、何も実行されません。ボタンがクリックされたときにdataTableを更新する適切な方法は何ですか？前もって感謝します！

4

25 に答える 25

159

DataTables のバージョン 1.10.0 では、組み込みで簡単です。

var table = $('#example').DataTable();
table.ajax.reload();

あるいは単に

$('#example').DataTable().ajax.reload();

http://datatables.net/reference/api/ajax.reload()

于 2014-06-17T01:18:18.043 に答える
37

最初にデータテーブルを破棄してから、データテーブルを描画します。

$('#table1').DataTable().destroy();
$('#table1').find('tbody').append("<tr><td><value1></td><td><value1></td></tr>");
$('#table1').DataTable().draw();
于 2016-06-21T11:09:17.623 に答える
33

次のことを試すことができます。

function InitOverviewDataTable() {
    oOverviewTable = $('#HelpdeskOverview').dataTable({
        "bPaginate": true,
        "bJQueryUI": true, // ThemeRoller-stöd
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": true,
        "bAutoWidth": true,
        "bProcessing": true,
        "iDisplayLength": 10,
        "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
    });
}

function RefreshTable(tableId, urlData) {
    $.getJSON(urlData, null, function(json) {
        table = $(tableId).dataTable();
        oSettings = table.fnSettings();

        table.fnClearTable(this);

        for (var i = 0; i < json.aaData.length; i++) {
            table.oApi._fnAddData(oSettings, json.aaData[i]);
        }

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        table.fnDraw();
    });
}
// Edited by Prasad
function AutoReload() {
    RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');

    setTimeout(function() {
        AutoReload();
    }, 30000);
}

$(document).ready(function() {
    InitOverviewDataTable();
    setTimeout(function() {
        AutoReload();
    }, 30000);
});

http://www.meadow.se/wordpress/?p=536

于 2012-10-17T12:34:12.593 に答える
31

DataTable の広範な API を使用して、それをリロードできます。ajax.reload()

データテーブルを (新しいバージョン) として宣言する場合は、次のものDataTable()が必要です。

var oTable = $('#filtertable_data').DataTable( );
// to reload
oTable.ajax.reload();

データテーブルを (古いバージョン) として宣言する場合は、次のものdataTable()が必要です。

var oTable = $('#filtertable_data').dataTable( );
// to reload
oTable.api().ajax.reload();
于 2015-08-15T19:46:59.903 に答える
31

私は同じ問題を抱えていました、これは私がそれを修正した方法です：

最初に選択した方法でデータを取得します。テーブルに変更を加える結果を送信した後、ajax を使用します。次に、新しいデータをクリアして追加します。

var refreshedDataFromTheServer = getDataFromServer();

var myTable = $('#tableId').DataTable();
myTable.clear().rows.add(refreshedDataFromTheServer).draw();

ここにソースがあります: https://datatables.net/reference/api/clear()

于 2015-07-09T06:58:28.197 に答える
5

データテーブルを更新する場合は、次のコードを使用します。

 $("#my-button").click(function() {
    $('#my-datatable').DataTable().clear().draw();
 });
于 2019-05-29T16:23:12.330 に答える
4

最初にデータテーブルを破棄してから、もう一度セットアップしてみてください。例

var table;
$(document).ready(function() {
    table = $("#my-datatable").datatable()
    $("#my-button").click(function() {
        table.fnDestroy();
        table = $("#my-datatable").dataTable();
    });
});
于 2014-09-28T04:11:59.820 に答える
2

スクリプトをロードする方法/場所は示していませんが、プラグイン API 関数を使用するには、DataTables ライブラリをロードした後、DataTable を初期化する前にページに含める必要があります。

このような

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.fnReloadAjax.js"></script>
于 2012-10-17T12:38:14.873 に答える
0

データテーブル v1.10.12 を使用している場合は、単に.draw()メソッドを呼び出して必要な描画タイプを渡すfull-resetだけpageで、新しいデータで dt を再描画します

let dt = $("#my-datatable").datatable()

// なんらかのアクションを実行

dt.draw('full-reset')

詳細については、データテーブルのドキュメントをご覧ください

于 2016-11-28T23:50:02.453 に答える