jquery - 使用 Ajax 调用填充数据表

Question

我想使用 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 对配置进行大量更改，这通常要快得多)。

请帮我解决这个问题。

Answer 1

我遇到了同样的问题...我通过每次需要重新加载表时销毁该表来解决。我调整了我的代码以与您的代码一起使用，因此将类似于:

$(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 等)，而不是使用成功选项重新加载数据，会更容易。