Заполнить Datatable вызовом Ajax

Я хочу отображать значения в таблице с помощью вызова AJAX. Код, используемый для этого,

initTable();

function initTable (){
    return $('#exEmpListTable').dataTable({
        "bPaginate": false,
        "sScrollY": "200px",
        "bScrollCollapse": true
    });
}

function tableActions (){
    var oTable = initTable();
    // perform API operations with oTable
    oTable.fnSort( [ [1,'desc']] );
}

$("#btnShowExEmpList").click(function (e){
    var selectedShop = $('#Shop').val();
    if(selectedShop == null){
        alert(" Please select a shop first ");
        return false;
    }
    if(selectedShop != null){
        alert("==== Selected Shop ==== "+selectedShop);
        var $exEmpDialog = $("#Dialog").dialog({
            width :275,
            height: 400,
            resizable: false,
            position: ['top', 200],
            modal: true
        });
        $exEmpDialog.dialog('close');
        $.ajax({
            url : 'empReqCreateNewReq.do',
            data : { getExEmpList: true, SelectedShop : selectedShop, ajaxCall : true },
            method : 'GET',
            dataType : 'json',
            contentType: "application/json; charset=utf-8",
            success : function(data) {
                alert('success === ' +data.exemplist.length);
                alert("======== ELEMENTS ======== "+JSON.stringify(data));
                //rePopulateExEmpList(data);
                //data = JSON.stringify(data);
                $exEmpDialog.dialog('close');
                //$(this).dialog('close')
                var oTable = initTable();
                oTable = $("#exEmpListTable").dataTable();
                //oTable.fnClearTable(0);
                oTable.oData[data];
                oTable.fnDraw();
                $exEmpDialog.dialog('open');
            },
            error : function(xhr, status) {
                alert('Sorry, there was a problem while placing your ajax request. Contact Admin!');
            }
        });
    }
    //$("#Dialog").dialog();
});

Во время этого я вижу значения в боте предупреждений. Но после этого он показывает сообщение об ошибке, что

DataTables warning (table id = 'exEmpListTable'): Cannot reinitialise DataTable.

Чтобы получить объект DataTables для этой таблицы, либо не передавайте аргументы функции dataTable(), либо установите для bRetrieve значение true. В качестве альтернативы, чтобы уничтожить старую таблицу и создать новую, установите для bDestroy значение true (обратите внимание, что многие изменения в конфигурации можно внести через API, который обычно намного быстрее).

Пожалуйста, помогите мне решить эту проблему.


jquery ajax jquery-datatables
person jobzJoseph    schedule 10.12.2012    source источник
comment
Я думаю, вам сначала нужно сделать вызов ajax, а затем инициализировать dataTable, и вам нужно будет его уничтожить, если вы хотите снова получить данные.   -  person jcubic    schedule 10.12.2012

Ответы (1)


arrow_upward
1
arrow_downward

У меня была та же проблема... Я решил, уничтожая таблицу каждый раз, когда мне нужно ее перезагрузить. Я адаптировал свой код для работы с вашим, поэтому будет что-то вроде:

$(document).ready(function(){
  var oTable;

  //reloading table when the button is clicked
  $('#btnShowExEmpList').click(function(){

    //if the table already exists, destroy it
    if (oTable){
      oTable.fnDestroy();
    }

    //initializing the table
    oTable = initTable();
  });

  //initializing the table automatically when the page loads
  $('#btnShowExEmpList').click();
});

И я также думаю, что вместо того, чтобы использовать вашу опцию успеха для перезагрузки данных, было бы проще, если бы вы установили некоторые опции для своей таблицы данных (bServerSide, sAjaxSource, fnServerData и т. д.).

person adolfotcar    schedule 04.05.2014