[javascript] jQuery dataTable을 다시로드 / 새로 고침하는 방법은 무엇입니까?

Program / 글쓴이

화면의 버튼을 클릭하면 jQuery dataTable 이 새로 고쳐지 는 기능을 구현하려고합니다 (dataTable이 생성 된 이후 서버 측 데이터 소스가 변경되었을 수 있으므로).

내가 가진 것은 다음과 같습니다.

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

그러나 이것을 실행하면 아무것도하지 않습니다. 버튼을 클릭 할 때 dataTable을 새로 고치는 적절한 방법은 무엇입니까? 미리 감사드립니다!

답변

다음을 시도 할 수 있습니다.

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

답변

DataTables 1.10.0 버전을 사용하면 다음과 같이 쉽게 기본 제공됩니다.

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

아니면 그냥

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

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

답변

광범위한 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();

답변

먼저 데이터 테이블을 파괴 한 다음 데이터 테이블을 그립니다.

$('#table1').DataTable().destroy();
$('#table1').find('tbody').append("<tr><td><value1></td><td><value1></td></tr>");
$('#table1').DataTable().draw();

답변

나는 같은 문제가 있었는데 이것이 내가 그것을 고친 방법입니다.

먼저 원하는 방법으로 데이터를 가져옵니다. 테이블을 변경할 결과를 제출 한 후 ajax를 사용합니다. 그런 다음 새로운 데이터를 지우고 추가합니다.

var refreshedDataFromTheServer = getDataFromServer();

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

다음은 소스입니다 :
https://datatables.net/reference/api/clear ()

답변

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

당신이 추가하려면 다시로드 / 새로 고침 버튼을 에 DataTables 1.10 후 사용 drawCallback을 .

아래 예를 참조하십시오 ( 부트 스트랩 CSS와 함께 DataTables 를 사용 하고 있습니다)

var ref= $('#hldy_tbl').DataTable({
        "responsive": true,
        "processing":true,
        "serverSide":true,
        "ajax":{
            "url":"get_hotels.php",
            "type":"POST"
        },
        "drawCallback": function( settings ) {
            $('<li><a onclick="refresh_tab()" class="fa fa-refresh"></a></li>').prependTo('div.dataTables_paginate ul.pagination');
        }
    });

function refresh_tab(){
    ref.ajax.reload();
}

답변

이 간단한 대답은 나를 위해 일했습니다. 

                  $('#my-datatable').DataTable().ajax.reload();

ref https://datatables.net/forums/discussion/38969/reload-refresh-table-after-event