2013-04-05 2 views
9

jQuery 데이터 테이블을 다시 초기화하는 방법은 무엇입니까? 심지어 테이블 요소를 제거하려고했습니다. 그 탁자가 여전히 표시됩니다. 내 코드는 다음과 같습니다.jquery를 다시 초기화하는 방법 Datatable

function removeExistingDataTableReference(tableid) 
{ 
    if(oTable !=null) 
    { 
     oTable.fnDestroy(); 
    } 

    if(document.getElementById(tableid)){ 
     document.getElementById(tableid).innerHTML=""; 
    } 

    oTable=null; 

    try 
    { 
     if(oTable !=null) 
     { 
      //oTable.fnDestroy(); 
      alert("error in fndestroy"); 
     } 

     oTable=null; 

     if(document.getElementById(tableid)){ 
      document.getElementById(tableid).innerHTML=""; 
     } 

     if(document.getElementById("FTable")) 
     { 
      removeElement(document.getElementById("FTable")); 
     } 

    } 
    catch(e) 
    { 
     alert("Error happend:"+e.message); 
    } 

} 

function removeElement(element) 
{ 
    try 
    { 
     var elem = document.getElementById('FTable'); 
     elem.parentNode.removeChild(elem); 
     //ert(element.parentNode.id); 
     //element.parentNode.removeChild(element); 
     alert("removed"); 
     return true; 
    } 
    catch(e) 
    { 
     alert(e.message); 
    } 

    return false; 

} 

어떻게하면됩니까? 검색 버튼 클릭 테이블이로드 된 후 다시 한 번, 다른 검색 매개 변수로 검색 할 때 테이블에 새 데이터가로드되어야합니다. 그것은 일어나지 않습니다. 그것을 고치는 방법 ??

표는 다음과 같이 초기화된다

function createDataTable() 
{ 
    try 
    { 
     oTable = $('#FTable').dataTable({ 
      "bDestroy":true, 
      "bJQueryUI": true, 
      "sScrollX": "100%", 
      "sScrollXInner": tablewidth+"px", 
      "bScrollCollapse": true, 
      "bSort":false, 
      "iDisplayLength" : 50, 
      "sPaginationType" : "full_numbers", 
      "aLengthMenu": [[10, 18, 50, -1], [10, 18, 50, "All"]] 
     }); 

     new FixedColumns(oTable, { 
      "iLeftColumns": 1, 
      "iRightColumns": 1 
     }); 
    } 
    catch (e) 
    { 
    alert(e.message); 
    } 
} 

답변

2

당신은 fnAddData()를 사용하여 원소를 첨가 한 다음 지우고하여 데이터 테이블을 초기화 할 수있다.

먼저 dataTable이 있는지 확인하십시오. fnClearTable() 함수는 테이블의 데이터를 지 웁니다.

코드에서 dataTable은 데이터 가능 변수이며 results은 테이블의 id입니다.

if(typeof dataTable === 'undefined'){ 
    dataTable = $('#results').dataTable({ 
     "aLengthMenu": [ 
      [25, 50, 100, 200], 
      [25, 50, 100, 200] 
     ], 
     "iDisplayLength" : 25, 
     "sPaginationType": "full_numbers", 
    }); 
}else dataTable.fnClearTable(); 

그런 다음 fnAddData를 사용하여 데이터를 다시 추가하십시오.

dataTable.fnAddData([key, assignee, summary, status, days]); 
+0

내가 동적 HTML 테이블을 생성 fnAddData.Each 시간을 사용하고 있지 않다 사용할 수 있습니다) – vmb

+0

어떻게 테이블을 동적으로 생성합니까? 같은 테이블에 두 개의 datatable 인스턴스를 가질 수는 없습니다. 당신도 동적으로 fnAddData를 사용하여 테이블을 만들 수 있으며, 이것이 올바른 방법입니다. AFAIK – dejavu

+1

먼저 동적으로 td와 tr을 추가하여 html 테이블을 만듭니다 .... 그러면 초기화 함수를 호출합니다 – vmb

0

그러면 내가() 함수 createDataTable를 호출하여 (데이터 테이블 즉로 변환 fnReloadAjax이

http://datatables.net/forums/discussion/256/fnreloadajax/p1

oTable = $('#FTable').dataTable({ 
    "bDestroy":true, 
    "bJQueryUI": true, 
    "sScrollX": "100%", 
    "sScrollXInner": tablewidth+"px", 
    "bScrollCollapse": true, 
    "bSort":false, 
    "iDisplayLength" : 50, 
    "sPaginationType" : "full_numbers", 
    "aLengthMenu": [[10, 18, 50, -1], [10, 18, 50, "All"]] 
}); 

function reinit(){ 
    oTable.fnReloadAjax('media/examples_support/json_source2.txt'); 
} 
관련 문제