Как перезагрузить данные datatable (jquery)?

Ответ 1

Вы можете использовать простой подход...

$('YourDataTableID').dataTable()._fnAjaxUpdate();

Он обновит данные, сделав запрос ajax с теми же параметрами. Очень просто.

Ответ 2

Вы можете использовать эту функцию:

function RefreshTable(tableId, urlData)
    {
      //Retrieve the new data with $.getJSON. You could use it ajax too
      $.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();
      });
    }

Не забывайте называть его после, что ваша функция удаления успешно завершена.

Источник: http://www.meadow.se/wordpress/?p=536

Ответ 3

Используйте fnReloadAjax() автором DataTables.net.

Я копирую исходный код ниже - в случае, если оригинал когда-либо перемещается:

$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
{
    if ( typeof sNewSource != 'undefined' && sNewSource != null )
    {
        oSettings.sAjaxSource = sNewSource;
    }
    this.oApi._fnProcessingDisplay( oSettings, true );
    var that = this;
    var iStart = oSettings._iDisplayStart;
    var aData = [];

    this.oApi._fnServerParams( oSettings, aData );

    oSettings.fnServerData( oSettings.sAjaxSource, aData, function(json) {
        /* Clear the old information from the table */
        that.oApi._fnClearTable( oSettings );

        /* Got the data - add it to the table */
        var aData =  (oSettings.sAjaxDataProp !== "") ?
            that.oApi._fnGetObjectDataFn( oSettings.sAjaxDataProp )( json ) : json;

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

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        that.fnDraw();

        if ( typeof bStandingRedraw != 'undefined' && bStandingRedraw === true )
        {
            oSettings._iDisplayStart = iStart;
            that.fnDraw( false );
        }

        that.oApi._fnProcessingDisplay( oSettings, false );

        /* Callback user function - for event handlers etc */
        if ( typeof fnCallback == 'function' && fnCallback != null )
        {
            fnCallback( oSettings );
        }
    }, oSettings );
}

/* Example call to load a new file */
oTable.fnReloadAjax( 'media/examples_support/json_source2.txt' );

/* Example call to reload from original file */
oTable.fnReloadAjax();

Ответ 4

Упрощенное решение:

var dt = $('#table_scroll').dataTable();

$.getJSON(url, null, function (json) {
    dt.fnClearTable();
    dt.fnAddData(json.aaData);
    dt.fnDraw();
});

Ответ 5

Если что-нибудь работает! Сделайте это:

Пример:

<div id="tabledisplay"><table class="display" id="table"></table><table </div>

как перезагрузить таблицу:

$('#tabledisplay').empty();
$('#tabledisplay').append("<table class=\"display\" id=\"table\"></table>");
initTable( "tablename");  

initTable - это всего лишь метод, который инициализировал таблицу с помощью getJSON.

Ответ 6

Ни один из этих решений не работал у меня, но я сделал что-то похожее на ответ Масуда. Вот он для потомков. Предполагается, что на вашей странице есть <table id="mytable"></table>:

function generate_support_user_table() {
        $('#mytable').hide();
        $('#mytable').dataTable({
            ...
            "bDestroy": true,
            "fnInitComplete": function () { $('#support_user_table').show(); },
            ...
        });
}

Важными частями являются:

• bDestroy, который вытирает текущую таблицу перед загрузкой.
• Вызов hide() и fnInitComplete, который гарантирует, что таблица появится только после загрузки. В противном случае он изменяется и выглядит странно при загрузке.

Просто добавьте вызов функции в $(document).ready(), и все должно быть установлено. Сначала он загрузит таблицу, а затем перезагрузит ее нажатием кнопки или что-то еще.

Ответ 7

// Get the url from the Settings of the table: oSettings.sAjaxSource

function refreshTable(oTable) {
    table = oTable.dataTable();
    oSettings = table.fnSettings();

    //Retrieve the new data with $.getJSON. You could use it ajax too
    $.getJSON(oSettings.sAjaxSource, null, function( json ) {
        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();
    });
}

Ответ 8

Я отправляю это на случай, если кому-то это понадобится..

Просто создайте кнопку:

<button type="button" href="javascript:void(0);" onclick="mytable.fnDraw();">Refresh</button>

но не забудьте добавить это при вызове datatable:

mytable = $("#mytable").dataTable();

Ответ 9

Чтобы перезагрузить данные таблицы из источника данных Ajax, используйте следующую функцию:

dataTable.ajax.reload()

Где dataTable - это переменная, используемая для создания таблицы.

var dataTable = $('#your_table_id').DataTable({
     ajax: "URL"
});

Подробнее см. ajax.reload().

Ответ 10

Для более новых версий используйте:

var datatable = $('#table').dataTable().api();

$.get('myUrl', function(newDataArray) {
    datatable.clear();
    datatable.rows.add(newDataArray);
    datatable.draw();
});

Взято из: fooobar.com/info/112932/...