jquery Datatable Search 显示删除的数据答案

【问题标题】：jquery Datatable Search shows removed datajquery Datatable Search 显示删除的数据
【发布时间】：2014-01-11 09:17:56
【问题描述】：

我正在使用http://datatables.net/的数据表

我的场景是我根据某些事件更改表格的内容。

<table cellpadding="0" cellspacing="0" border="0" id="dataTable0">
   <thead>
      <tr style="width: 100%;">                         
         <th>Campaign Name</th>
         <th>Schedule</th>
         <th>List</th>  
      </tr>
    </thead>
  <tbody id="CampaignTableViewBody"></tbody>
</table>

数据表的初始化脚本

$(document).ready(function() {
   oTable = $('#dataTable0').dataTable({
    "bJQueryUI": true,
    "bScrollCollapse": false,
    "sScrollY": "200px",
    "bAutoWidth": true,
    "bPaginate": true,
    "sPaginationType": "full_numbers", //full_numbers,two_button
    "bStateSave": false,
    "bInfo": true,
    "bFilter": true,
    "iDisplayLength": 25,
    "bLengthChange": true,
    "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
  });
});

动态填充数据

$("#CampaignTableViewBody").empty();
$("#CampaignTableViewBody").append(
     '<tr>'+ 
        '<td>'+obj.name+'</td>'+
        '<td>'+obj.startTime+'</td>'+
        '<td>'+obj.listTemplateUsed+'</td>'+                            
      '</tr>');

我有一个下拉菜单说 Select ClassRoom ：我正在动态填充属于选定教室的表中的所有学生数据。

假设课堂“A”被选中，那么我将在表格中显示“Rahul”、“Jason”

现在，如果用户更改教室，那么我将使用 $("#CampaignTableViewBody").empty(); 从表中删除所有数据并在表中迭代新数据。

假设课堂“B”被选中，然后我删除表中的所有数据，然后我将在表中显示“Mayur”、“John”。

但这里的问题是，当我在 Word“Rahul”提供的数据表中的搜索框中进行搜索时，它会显示不应该大小写的行，因为“B”类被选中而 B 类没有 Rahul。

虽然在表格中填充数据一切正常，但我只能看到 2 行，即“Mayur”和“John”，唯一的问题是在数据表搜索中，结果中的旧数据不再存在。

知道如何克服它。

【问题讨论】：

您没有意识到该插件不只是操作 html。它将 html 和数据存储在缓存数组中。您需要使用插件API来添加和删除数据
@charlietfl：你是对的。我是白痴，我没有正确阅读 api 并以上述方式编写了很多代码。你能告诉我解决方法吗？
解决方法是什么意思？为什么不能使用 API？

标签： javascript jquery datatable datatables jquery-datatables

【解决方案1】：

您需要“销毁”之前的 DataTable

$("#dataTable0").dataTable().fnDestroy(); // Destroy the previous table
$("#CampaignTableViewBody").empty(); // Empty (remove any DOM elements)


$("#CampaignTableViewBody").append( 
     '<tr>'+ 
        '<td>'+obj.name+'</td>'+
        '<td>'+obj.startTime+'</td>'+
        '<td>'+obj.listTemplateUsed+'</td>'+                            
      '</tr>'); // Append the new information 

$("#dataTable0").dataTable(settings); // Recreate the datatable

希望这对你有用！更多Api函数在这里：http://datatables.net/api

祝实施顺利。

【讨论】：