Перерисовывать данные после использования ajax для обновления содержимого таблицы?

Question

Я использую Datatables и у меня есть кнопка на странице, которая обновляет таблицу с помощью AJAX.Чтобы было ясно, что таблица не использует источник данных ajax, мы просто используем ajax, чтобы обновлять ее только при необходимости.Ajax обновляет div, в который обернута таблица. Я знаю, что теряю свои кнопки нумерации страниц и возможности фильтрации, потому что таблицу нужно перерисовать, но я не уверен, как добавить это в код инициализации таблицы.

Код Datatables

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);
    };
},

Answer 1

Похоже, вы могли бы использовать функции 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
        ]

    } 
    );
}

Answer 2

Попробуйте уничтожить данные с помощью 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 сначала уничтожит экземпляр данных, связанный с этим селектором, перед повторной инициализацией нового.

Answer 3

Я не уверен почему. Но

oTable6.fnDraw();

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

Answer 4

Используйте это:

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

или

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

Answer 5

Для пользователей современных DataTables (1.10 и выше) все ответы и примеры на этой странице относятся к старому API, а не к новому.Мне было очень трудно найти более новый пример, но в конце концов я нашел это сообщение на форуме DT (TL; 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();

Внимательный читатель может заметить, что, поскольку мы добавляем только одну строку данных, этот table.row.add (...) должен работать так же, как и я.

Answer 6

В инициализации используйте:

"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 не будет работать так, как вы хотите.

Answer 7

Это работает для меня

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();

Answer 8

Вот как я заполняю свою таблицу данными, полученными с помощью 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] );
    }                                
}