Jquery 데이터 테이블이 삭제/재작성

Jquery 데이터 테이블이 삭제/재작성

json call을 통해 datable을 다시 로드하려고 합니다.저는 DataTables-1.10.9와 jquery-2.1.4를 사용해 왔습니다.

datatable 내에서 .ajax API로 결제를 시도했지만 아무 것도 없었기 때문에 예전에 고소했던 방식을 시도해보려고 했습니다.

HTML이 테이블에 추가되었을 때 깨지면 괜찮아 보입니다(이것으로 보면 이전 데이터가 제거되고 새로운 데이터가 표시됨을 의미합니다).그러나 $('#tbl송금목록').dataTable({...}); 명령이 다시 실행됩니다. 새 데이터가 아닌 이전 데이터를 'reload'합니다.데이터 테이블을 사용하지 않으면 원시 테이블에 올바른 데이터가 표시됩니다.

//----------------------------------------------------------------------------------------
function fncOpenRemittancesRead(pFrRem,pToRem) {

    wsUrl = "../Json/OpenRemittances.asp"   +
                    "?qryDatabase="         + encodeURIComponent(wsDatabase)    +
                    "&qryFrRemittance=" + encodeURIComponent(pFrRem)            +
                    "&qryToRemittance=" + encodeURIComponent(pToRem);

    $('body').addClass('waiting');
    $.getJSON(wsUrl, function(data) {
        fncOpenRemittancesFill(data);
        $('body').removeClass('waiting');
    });
}

//----------------------------------------------------------------------------------------
function fncOpenRemittancesFill(pData) {
    var wsHtml = '';

    $('#tblRemittanceList tbody').empty();

    for (var i = 0; i < pData.length; i++) {
        wsHtml += '<tr>';
        wsHtml += '<td>' + trim(pData[i].col_1) + '</td>';
        wsHtml += '<td>' + trim(pData[i].col_2) + '</td>';
        wsHtml += '<td>' + trim(pData[i].col_3) + '</td>';
        wsHtml += '<td>' + fncFormatDate(pData[i].col_4,4) + '</td>';
        wsHtml += '<td>' + fncFormatNumber(pData[i].col_5,2,"N") + '</td>';
        wsHtml += '<td>' + trim(pData[i].col_6) + '</td>';
        wsHtml += '<td>' + fncFormatNumber(pData[i].col_7,2,"N") + '</td>';
        wsHtml += '<td>' + trim(pData[i].col_8) + '</td>';
        wsHtml += '</tr>';
    }

    $('#tblRemittanceList > tbody:last').append(wsHtml);

    $('#tblRemittanceList').dataTable({
          "autoWidth":false
        , "destroy":true
        , "info":false
        , "JQueryUI":true
        , "ordering":true
        , "paging":false
        , "scrollY":"500px"
        , "scrollCollapse":true
    });

}

원인

옵션 때문에 DataTables가 테이블을 파괴하는 경우destroy:true원래 콘텐츠를 복원하고 생성한 콘텐츠를 폐기합니다.

솔루션 1위

제거한다.destroy:trueoption 및 destroy 후 API 메서드로 테이블을 조작합니다.

if ( $.fn.DataTable.isDataTable('#tblRemittanceList') ) {
  $('#tblRemittanceList').DataTable().destroy();
}

$('#tblRemittanceList tbody').empty();

// ... skipped ...

$('#tblRemittanceList').dataTable({
      "autoWidth":false, 
      "info":false, 
      "JQueryUI":true, 
      "ordering":true, 
      "paging":false, 
      "scrollY":"500px", 
      "scrollCollapse":true
});

솔루션 #2

제거한다.destroy:true테이블 내용을 지우고 테이블 데이터를 추가한 다음 테이블을 다시 그리기 위해 테이블 사용을 삭제 및 재생성하는 대신 옵션을 선택합니다.

이 경우 페이지 초기화 시 DataTables를 초기화해야 합니다.

다음과 같이 retrieve 옵션을 사용하여 데이터 테이블을 초기화할 수 있습니다.

var table = $('#myTable').DataTable( {
                        dom: 'Bfrtip',
                        retrieve: true, ...

그것을 치우고 파괴해야 하는 것보다.

$('#myTable').DataTable().clear().destroy();

마지막으로 데이터 테이블을 재생성할 때까지:

 var table = $('#myTable').DataTable( {
                        dom: 'Bfrtip',
                        retrieve: true,

여기서 Retrieve 튜토리얼을 확인하십시오. https://datatables.net/reference/option/retrieve

그냥 destroy () 메서드를 사용하여 테이블을 다음과 같이 파괴합니다.

$('#experience-table').DataTable().destroy();

다음 예제와 같이 다시 initial화합니다.

var table= $('#experience-table').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: '{{url('employee/experience/list/experience')}}'+'/'+emp_id,
                    columns: [
                        { data: 'emp_no', name: 'emp_no' },
                        { data: 'position', name: 'position' },
                        { data: 'organization', name: 'organization' },
                        { data: 'duration', name: 'duration' },
                        { data: 'action', name: 'action' },
                    ],
                    searching: false


                });

datatable refresh
$('#Clienttbl').dataTable().fnClearTable();

언급URL : https://stackoverflow.com/questions/32713612/jquery-datatables-destroy-re-create