使用Ajax調用填充數據表

我想使用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.

要檢索的DataTable對象此表，請通過其中任何參數到DataTable（）函數，或設置bRetrieve爲true。或者，爲了使舊錶無法創建並創建新表，請將bDestroy設置爲true（請注意，通過API可以對配置進行很多更改，而這通常要快得多）。

請幫我解決這個問題。

來源

2012-12-10 jobzJoseph

我認爲你首先需要做ajax調用，然後初始化dataTable，如果你想再次獲取數據，你將需要銷燬它。 – jcubic

我遇到了同樣的問題...我每次需要重新加載時都銷燬表來解決問題。我適應我的代碼與你的工作，所以會是這樣的：

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

來源

2014-05-04 12:06:53 adolfotcar

使用Ajax調用填充數據表

回答

相關問題