jQuery 如何重新初始化jquery数据表

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15827039/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 15:52:09  来源:igfitidea点击:

How to reinitialize jquery Datatable

javascriptjquerydatatables

提问by vmb

How to reinitialize a jQuery datatable? I even tried to remove table element. Still that table is displaying. My code is like this:

如何重新初始化 jQuery 数据表?我什至试图删除表格元素。仍然显示该表。我的代码是这样的:

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

采纳答案by dejavu

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

您可以通过清除数据表然后使用添加元素来重新初始化数据表fnAddData()

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

首先检查是否dataTable存在。该函数fnClearTable()将清除表中的数据。

In the code, dataTableis datatable variable and resultsis the idof table.

在代码中,dataTable是数据表变量,resultsid表的。

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.

然后再次使用 fnAddData 添加数据。

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

回答by levye

You may use fnReloadAjax

您可以使用 fnReloadAjax

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

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