2012-03-12 3 views
8

DataTables 플러그인을 사용하여 테이블을 대화 형으로 만듭니다.DataTables를 새로 고치는 방법

페이지의 PHP에 의해 표가 에코됩니다.

DB에 레코드를 추가 할 때 jQuery load()를 사용하여 테이블을로드하지만 DataTables가 손상됩니다.

DataTable을 그대로 유지하면서 테이블을 업데이트하려면 어떻게해야합니까?

참고 : 서버 측 처리가 아니라 데이터 소스로 DOM을 사용하고 있습니다.

+0

데이터 테이블을 설정하는 데 사용하는 자바 스크립트 코드를 게시 할 수 있습니까? –

+0

$ ('# 새로운') 데이터 테이블 ({ \t \t \t "iDisplayLength": 5, \t \t \t "sPaginationType": "full_numbers" \t \t});. –

+0

시도' "bDestroy"TRUE '나는이'VAR 롤 = $ ('# 새로운') 데이터 테이블 ({ "iDisplayLength을"내 테이블을 만드는저기서하고 –

답변

9

전체 테이블을 완전히 다시로드하는 경우 함수에 초기 데이터 테이블 초기화 코드를 래핑하십시오. 페이지로드시 해당 함수를 호출하십시오. 테이블을 아약스로 완전히 대체 할 때, 플러그인에 의해 생성 된 테이블 parent div를 생성하는 모든 비 테이블 DOm 요소에 대한 래퍼로 제거해야합니다. 테이블 ID가 "example"이면 래퍼 ID는 "example_wrapper"입니다.

여기에 충분한 코드가 도움이 될 것입니다. 이 단지 업데이트 행에 대한 쉬운 방법이있다 그러나 요청이 전체 테이블 재 장전을 위해이기 때문에 나는 당신이 당신의 데이터 테이블을 만들 때

function initDataTables(){ 
    $('#myTable').datatables({/* put all current options here*/}) 

} 


/* within ready event of pageload */ 

$(function(){ 
    initDataTables(); 
    /* all other page load code*/ 

}); 

/* use $.get to reload table */ 

$.get(tableUpdateUrl, data, function(returnData){ 

    $('#myTable').parent().replaceWith(returnData); 

    /* re-initalize plugin*/ 

    initDataTables(); 
}); 
+0

감사합니다. 약간 수정 해 완벽하게 작동합니다 : D –

+3

이것은 페이지에 추가로드가 많이 필요하지 않습니다. DataTables는 데이터 세트에 새 행을 추가하는 메소드를 제공합니다. –

+1

tableUpdateUrl이란 무엇입니까? –

5

는 변수에 결과 값을 할당하는 것이 따랐습니다 :

var table = $(".something").dataTable(); 

AJAX를 통해 새 항목을 만들 때 테이블이 표시해야하는 속성을 반환해야합니다. 그런 다음 success 함수에서 fnAddData 메서드를 사용하여 테이블에 새 행을 추가 할 수 있습니다. 이 방법은 값의 배열에 소요 첫번째 등등 초 초, 첫 번째 열에서 진행하고 :

success: function(response){ 
    table.fnAddData([ 
     response.id, 
     response.name, 
     response.description, 
    ]); 
} 

당신은 fnAddDatahere 방법에 대한 자세한 내용을 읽을 수있다.

관련 문제