如何重新初始化jQuery Datatable

Question

如何重新初始化 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);
    }   
}

- vmb

Answer 1

您可以通过清空数据表并使用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]);

- dejavu

---

我没有使用fnAddData。每次我动态创建一个HTML表，然后通过调用createDataTable()函数将其转换为数据表。 - vmb

首先，我将通过动态添加td和tr来创建HTML表格...然后我将调用初始化函数。 - vmb

我会动态创建所有内容。每次搜索按钮点击都是一个ajax请求。因此，如果表不存在，我将首先创建该表，并动态添加行到该表中。如果已存在，则将删除现有表并根据ajax响应创建新表。 - vmb

但是如果你这样做，datatable将无法感知到更改。因此，您必须使用datatable自己的API，它非常简单和直观。 - dejavu

但是DataTable怎么知道呢？ - dejavu

Answer 2

您可以使用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' );
}

- levye