填充的DataTable使用Ajax调用 [英] Populate Datatable with Ajax call

问题描述

我要显示的值到使用AJAX调用表。使用它的code是，

I want to display the values into the table using an AJAX call. The code used for it is,

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

在运行此，我可以看到在警戒机器人的衣被合计。但在那之后，它显示的错误消息

While running this, I can see the valus in the alert bot. But after that, it shows an error message that

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

要检索的DataTable对象此表，请通过其中任何参数到DataTable（）函数，或者设置bRetrieve为true。或者，要destory旧表，并创建一个新的，设置bDestroy为true（注意，很多更改配置都可以通过它通常快得多的API进行）。

To retrieve the DataTables object for this table, please pass either no arguments to the dataTable() function, or set bRetrieve to true. Alternatively, to destory the old table and create a new one, set bDestroy to true (note that a lot of changes to the configuration can be made through the API which is usually much faster).

请帮我解决这个问题。

推荐答案

我有同样的问题...我解决了每一个我需要重新加载时间破坏表。我适应我的code与你的工作，所以会是这样的：

I was having the same problem...I solved by destroying the table each time I need to reload it. I adapted my code to work with yours, so will be something like:

$(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等）来代替。

And I also think that instead using your success option to reload the data, would be easier if you set some options for your datatable (bServerSide, sAjaxSource, fnServerData, etc).

这篇关于填充的DataTable使用Ajax调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！