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

Program / 글쓴이

플러그인 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();
});

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

Jsfiddle

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

답변

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

먼저 $ .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);

답변

제 경우에는 내장 된 ajax API를 사용하여 Json을 테이블에 공급하지 않습니다 (이는 데이터 테이블의 렌더링 콜백 내부에서 구현하기가 다소 어려웠던 일부 형식 지정 때문입니다).

내 솔루션은 온로드 함수의 외부 범위와 데이터 새로 고침을 처리하는 함수 (var table = null 예 .

그런 다음 on load 메서드에서 테이블을 인스턴스화합니다.

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

마지막으로 새로 고침을 처리하는 함수에서 clear () 및 destroy () 메서드를 호출하고 데이터를 html 테이블로 가져온 다음 데이터 테이블을 다시 인스턴스화합니다.

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

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

답변