How to reinitialize jquery Datatable

Question

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);
    }   
}

Answer 1

You may use 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' );
}

Answer 2

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]);