Datatables 열 정의 및 재주문이 다시로드 된 후에 적용되지 않습니다.

Question

사용자가 페이지에있는 동안 정기적으로 업데이트되는 동일한 데이터를 사용하는 많은 프로세스가 있습니다. 이제이 데이터를 표시하기 위해 datatables를 사용하려고합니다.

또한 ColReorder 플러그인을 사용합니다.

문제점은 데이터 테이블에 새 데이터로 '로컬'var를 '다시로드'하도록하는 방법을 이해할 수 없다는 것입니다.

"aoColums"설정에는 이미지 용 데이터 필드의 일부를 사용하는 정의가 많이 있습니다.

데이터 var의 일부 데이터가 변경되었습니다. 데이터 테이블에 그것을 테이블에 넣으려고했습니다. 불운. 나는 api에서 쓸만한 예제 나 기능을 찾을 수 없습니다.

oTable.fnClearTable() 및 oTable.fnAddData (데이터)를 사용하려고하면 데이터가로드되지만 어떻게 든 ColReorder는 적용되지 않습니다.

myTable = $('#myTable').dataTable({ 
    "aoColumns": [ ... ], 
    "aaSorting": [[1, 'asc']], 
    "aaData": data, 
    "sScrollY": 200, 
    "sScrollX": "100%", 
    "sScrollXInner": "150%", 
    "bJQueryUI": true, 
    "sPaginationType": "full_numbers", 
    "sDom": 'R<"H"lfr>t<"F"ip>', 
    "iFixedColumns": 3, 
    "oColReorder": { 
     "aiOrder": [ 0, 8, 2, 3, 4, 5, 6, 7, 1, 9 ] 
    } 
}); 

아이디어가 있으십니까?

편집 나는 모든 문제가 설명 된 작업을했습니다. jsFIddle 보세요, 가자!

Answer 1

나는 당신의 문제에 대해 읽었습니다 .... 나는 당신의 문제에 대한 또 다른 접근법을 취합니다. (항상 dom 조작 xD에 관한 것입니다 ...) 가장 똑똑하지는 않지만 내 생각에는 효과가 있다고 생각합니다.

• 나는 함수 내부에 datatables 조작을 넣어 내가 사업부 빈 사업부를
• 그런 다음 내가 갱신에 그 기능을
• 를 호출없이 테이블을 추가하고 테이블 datatbles 조작하기 전에이 같은 HTML을 추가하고 fill
• 그런 다음 ColReorder 플러그인이 업데이트 된 데이터와 함께 작동하여 전체 datatables를 다시 그리는 함수를 호출하십시오.

PS : http://jsfiddle.net/aKuHM/5이

이제 표는 다음과 같습니다 :

<div class="Example" id="Example"> 
<table id="myTable" class="datatable"> 
<thead> 
</thead> 
    <tbody> 
    </tbody> 
<tfoot> 
</tfoot> 
</table> 
</div> 

그리고 당신의 JS 머리에 그것의 로딩을이 방법을 찾습니다 : 여기에 자세한 내용은 업데이트 된 바이올린은

data = [ 
      ['cell1', 'cell2','cell3','cell4','cell5','cell6','cell17', 'cell8', 'cell9', 'cell10'], 
      ['cell1', 'cell2','cell3','cell4','cell5','cell6','cell17', 'cell8', 'cell9', 'cell10'], 
      ['cell1', 'cell2','cell3','cell4','cell5','cell6','cell17', 'cell8', 'cell9', 'cell10'], 
     ]; 
     function Saludos(){ 
     $(function(){ 
      myTable = $('#myTable').dataTable({ 
       "aoColumns": [ 
        {"sTitle":"col0", "bSearchable": false, "bVisible": true}, 
        {"sTitle":"col1", "bSearchable": false, "bVisible": true}, 
        {"sTitle":"col2", "bSearchable": true, "bVisible": true}, 
        {"sTitle":"col3", "bSearchable": true, "bVisible": true}, 
        {"sTitle":"col4", "bSearchable": true, "bVisible": true}, 
        {"sTitle":"col5", "bSearchable": false, "bVisible": true}, 
        {"sTitle":"col6", "bSearchable": true, "bVisible": true}, 
        {"sTitle":"col7", "bSearchable": false, "bVisible": true}, 
        {"sTitle":"col8", "bSearchable": true, "bVisible": true, 
         "mRender": function (data, type, row){ 
          return '<b><i>'+ row[8] +'</i></b>'; 
         } 
        }, 
        {"sTitle":"col9", "bSearchable": false, "bVisible": false}, 
       ],  
       "aaSorting": [[8, 'asc']], 
       "aaData": data, 
       "sScrollY": 200, 
       "sScrollX": "100%", 
       "sScrollXInner": "150%", 
       "bJQueryUI": true, 
       "sPaginationType": "full_numbers", 
       "sDom": 'R<"H"lfr>t<"F"ip>', 
       "iFixedColumns": 3, 
       "oColReorder": { 
        "aiOrder": [ 0, 8, 2, 3, 4, 5, 6, 7, 1, 9 ] 
       } 
      }); 

      $('#updatebutton').click(function(){ 
       updateTable(); 
      }); 
     }); 

     } 
     Saludos(); 
     function updateTable(){ 
      data[1][8] = "even bolder"; 
      $('.Example').empty(); 
      $("#Example").html("<table id='myTable' class='datatable'><thead></thead> <tbody></tbody><tfoot></tfoot></table>"); 
      Saludos(); 
      console.log(data); 

     }