새 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 옵션 빌드가 아닌)를 사용하여 새로운 데이터를 얻고 이 데이터로 테이블을 업데이트하고 싶습니다.데이터 테이블 API를 사용하여 어떻게 할 수 있습니까?서류가 매우 혼란스럽고 해결책을 찾을 수 없습니다.어떤 도움이든 매우 감사하겠습니다.감사해요.

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

명확화 API 설명서(1.10.15)에 따라 API에는 다음과 같은 세 가지 방법으로 액세스할 수 있습니다.

1. 데이터 테이블의 현대적인 정의(카멜 케이스 위):

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

2. 데이터 테이블의 레거시 정의(하부 카멜 케이스):

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

사용하다draw(false)데이터 업데이트 후에도 동일한 페이지를 유지할 수 있습니다.

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

제이피들

업데이트. 그리고 예. 현재 설명서가 그리 좋지는 않지만 이전 버전을 사용하는 것이 괜찮다면 레거시 설명서를 참조할 수 있습니다.

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

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

만약 존재한다면, 그것을 파괴한 다음 이렇게 새로운 인스턴스를 만듭니다.

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

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

다음은 레거시 데이터 표 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);

저의 경우 Json을 테이블에 공급하기 위해 내장된 Ajax API를 사용하지 않습니다(이는 데이터 테이블의 렌더 콜백 내에서 구현하기 어려웠던 일부 포맷 때문입니다).

제 솔루션은 온로드 함수의 외부 범위에 변수를 생성하고 데이터 새로 고침을 처리하는 함수를 생성하는 것이었습니다.var table = null예를 들어).

그런 다음 온로드 방법으로 테이블을 인스턴스화합니다.

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

그리고 마지막으로, 새로 고침을 처리하는 함수에서, 나는 clear() and destroy() 메서드를 호출하고, html 테이블로 데이터를 가져오고, 다음과 같이 데이터 테이블을 다시 인증합니다.

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

누군가가 이것을 유용하게 생각하기를 바랍니다!

제 대답이 질문과 직접적인 관련이 없다는 것을 알지만, 저는 새로운 버전의 데이터 테이블에서 동일한 작업을 수행하는 방법을 찾는 데 많은 시간을 소비합니다. 그래서 저는 제 예시가 미래에 누군가의 시간을 절약할 수 있기를 바랍니다.

const table = js('#tbllist').DataTable({
    columns: [
        {data: 'createDate'},
        {data: 'status'},
        {data: 'paymentType'},
        {data: 'currency'},
        {data: 'amount'}
    ]
});

// Assume that this array has objects of new data with structure defined above
const arr = [] 

// These will update table
table.clear();
table.rows.add(arr);
table.draw();

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