web-dev-qa-db-fra.com

Comment réinitialiser jquery Datatable

Comment réinitialiser un jQuery datatable? J'ai même essayé de supprimer l'élément de table. Encore cette table est affichée. Mon code est comme ça:

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;

}

Comment puis je faire ça? Après le bouton de recherche, la table est chargée Encore une fois, lorsque je recherche avec un autre paramètre de recherche, la table devrait se charger avec de nouvelles données. Cela ne se passe pas. Comment le réparer??

La table est initialisée comme ceci:

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);
    }   
}
javascriptjquerydatatables
9
vmb

Vous pouvez réinitialiser le datatable en l'effaçant puis en ajoutant l'élément à l'aide de fnAddData().

Commencez par vérifier si la dataTable existe ou non. La fonction fnClearTable() effacera les données de la table.

Dans le code, dataTable est une variable datatable et results est la id de la 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();

Ajoutez à nouveau les données en utilisant fnAddData.

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

Vous pouvez utiliser 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' );
}
0
levye