데이터 테이블을 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(); 
}); 

실행 중에 경고 봇에 valus가 표시됩니다. 그러나 그 후,이

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 등).