X-Editable 및 Bootstrap 데이터 테이블

Question

bootstrap 데이터 테이블에서 x-editable을 구현하는 데 성공했습니다. 그 이유는 x 편집 가능 요소를 업데이트 할 때 데이터 테이블이 변경 사항을 인식하지 못하기 때문입니다. 숨겨진 태그를 파괴 테이블을 업데이 트하지만 주요 문제는 datatables 초기화 후 어떤 변화를 인식하지 못하는 것 같다. 버튼 클릭을 통해 행을 추가, 그들이 테이블에 도착하면, 나는. editable을 실행 그 요소들에. 그들은 편집 할 수있게되지만 데이터 테이블의 정렬 및 검색은 작동하지 않습니다.

아무도 도와 줄 수 있습니까?

Answer 1

성능상의 이유로 Datatables는 테이블을 메모리에 캐시하므로 실제 DOM 테이블은 메모리 테이블과 다릅니다. 그리고 DOM을 수정할 때 메모리 내 테이블을 변경하지 않습니다.

따라서 Datatables는 http://datatables.net/reference/api/row%28%29.invalidate%28%29 행에 적용 할 수있는 함수 도우미 : invalidate()을 작성했습니다 (다중 행 버전도 있음).

또는 여전히 CPU 소비가 적은 data() 기능을 사용할 수 있습니다 (권장).

나는 이런 식으로 뭔가 할 것 :

$('.xeditable').on('save', function(e, params) { 
    var $tr = $(e.target).closest('tr'); 
    var newValue = params.newValue; 
    //If you didn't save the datatable into a var table, you need to call this line : 
    //var table = $('#example').DataTable(); 
    table.row(tr).data(newValue); 
    //Or table.row(tr).invalidate(); which should read from the DOM directly 
});