How to reinitialize jquery Datatable

datatables, javascript, jquery

Solution

You can reinitialize the datatable by clearing it and then adding the element using `fnAddData()`.

First check whether the `dataTable` exists or not. The function `fnClearTable()` will clear the data from table.

In the code, `dataTable` is datatable variable and `results` is the `id` of table.

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

Then again add the data using fnAddData.

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

Problem

How to reinitialize a jQuery datatable? I even tried to remove table element. Still that table is displaying. My code is like this: ``` 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; } ``` How can I do that? After Search button click table is loaded. Again, when I search with another search parameter, table should load with new data. That is not happening. How to fix it?? Table is initialized like this: ``` 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); } } ```

Original source