새 JSON 데이터로 데이터 테이블 테이블을 수동으로 업데이트하는 방법

새 JSON 데이터로 데이터 테이블 테이블을 수동으로 업데이트하는 방법

---

플러그인 jQuery 데이터 테이블을 사용 하고 페이지 하단의 DOM에로드 한 데이터를로드하고 다음과 같이 플러그인을 시작합니다.

var myData = [
    {
        "id": 1,
        "first_name": "John",
        "last_name": "Doe"
    }
];

$('#table').dataTable({
    data: myData
        columns: [
        { data: 'id' },
        { data: 'first_name' },
        { data: 'last_name' }
    ]
});

지금. 어떤 작업을 수행 한 후 ajax를 사용하여 새 데이터를 얻고 (데이터 테이블의 ajax 옵션 빌드가 아닙니다-오해하지 마십시오!) 이러한 데이터로 테이블을 업데이트하고 싶습니다. Datatables API를 사용하여 어떻게 할 수 있습니까? 문서가 매우 혼란스럽고 해결책을 찾을 수 없습니다. 어떤 도움이라도 대단히 감사하겠습니다. 감사.

---

솔루션 : (참고 :이 솔루션은 레거시 버전이 아닌 데이터 테이블 버전 1.10.4 (현재) 용입니다).

설명 사용자 단위 API 문서 (1.10.15)는 API는 세 가지 방법으로 액세스 할 수 있습니다 :

1. DataTables의 현대적인 정의 (카멜 대문자) :

   var datatable = $( selector ).DataTable();

2. DataTables의 레거시 정의 (lower camel case) :

   var datatable = $( selector ).dataTable().api();

3. new구문 사용 .

   var datatable = new $.fn.dataTable.Api( selector );

그런 다음 다음과 같이 데이터를로드합니다.

$.get('myUrl', function(newDataArray) {
    datatable.clear();
    datatable.rows.add(newDataArray);
    datatable.draw();
});

API 참조 :

https://datatables.net/reference/api/clear ()

https://datatables.net/reference/api/rows.add ()

https://datatables.net/reference/api/draw ()

---

당신이 사용할 수있는:

$('#table').dataTable().fnClearTable();
$('#table').dataTable().fnAddData(myData2);

Jsfiddle

최신 정보. 예, 현재 문서는 그다지 좋지 않지만 이전 버전을 사용해도 괜찮다면 레거시 문서를 참조 할 수 있습니다 .

---

이전 데이터 테이블 인스턴스를 삭제 한 다음 데이터 테이블을 다시 초기화해야합니다.

먼저 $ .fn.dataTable.isDataTable 을 사용하여 데이터 테이블 인스턴스가 있는지 확인하십시오.

존재한다면 그것을 파괴하고 다음과 같은 새 인스턴스를 만듭니다.

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

    $('#dataTableExample').DataTable({
        responsive: true,
        destroy: true
    });

---

In my case, I am not using the built in ajax api to feed Json to the table (this is due to some formatting that was rather difficult to implement inside the datatable's render callback).

My solution was to create the variable in the outer scope of the onload functions and the function that handles the data refresh (var table = null, for example).

Then I instantiate my table in the on load method

$(function () {
            //.... some code here
            table = $("#detailReportTable").DataTable();
            .... more code here
        });

and finally, in the function that handles the refresh, i invoke the clear() and destroy() method, fetch the data into the html table, and re-instantiate the datatable, as such:

function getOrderDetail() {
            table.clear();
            table.destroy();
            ...
            $.ajax({
             //.....api call here
            });
            ....
            table = $("#detailReportTable").DataTable();
   }

I hope someone finds this useful!

---

Here is solution for legacy datatable 1.9.4

    var myData = [
      {
        "id": 1,
        "first_name": "Andy",
        "last_name": "Anderson"
      }
   ];
    var myData2 = [
      {
        "id": 2,
        "first_name": "Bob",
        "last_name": "Benson"
      }
    ];

  $('#table').dataTable({
  //  data: myData,
       aoColumns: [
         { mData: 'id' },
         { mData: 'first_name' },
         { mData: 'last_name' }
      ]
  });

 $('#table').dataTable().fnClearTable();
 $('#table').dataTable().fnAddData(myData2);

참고URL : https://stackoverflow.com/questions/27778389/how-to-manually-update-datatables-table-with-new-json-data