'datatable' jquery 插件和两个表（ajax 相关）的问题答案

【问题标题】：problem with 'datatable' jquery plugin and two table (ajax related)'datatable' jquery 插件和两个表（ajax 相关）的问题
【发布时间】：2011-04-27 06:07:27
【问题描述】：

我有两个标签，它们的内容由 ajax 加载。两者的内容都有一个表格。我想将'datatable' jquery 插件应用于两个表。表具有相同的 ID，因为它们是由函数创建的。但它们的行不同。

datatable 插件很好地应用于第一个选项卡表，但在第二个选项卡上出现此错误：

"DataTables warning (table id = 'dttable'): Cannot reinitialise DataTable.

要检索此表的 DataTables 对象，请不向 dataTable() 函数传递任何参数，或者将 bRetrieve 设置为 true。或者，要销毁旧表并创建新表，请将 bDestroy 设置为 true（请注意，可以通过 API 对配置进行很多更改，这通常会更快）。”

我在数据表插件定义中使用“bDestroy”：true。但这样插件不会显示在第二个表中。

你会帮我吗？

【问题讨论】：

标签： jquery-plugins jquery datatables

【解决方案1】：

您的问题是两个表具有相同的 ID，这是无效的 HTML。当您尝试初始化第二个 Databable 时，您的选择器仅找到第一个表并尝试再次初始化第一个表上的 Datatables，这会导致您遇到错误。

您需要更改您的函数以创建具有唯一 ID 的每个表，并通过其各自的 ID 初始化每个表。

【讨论】：

【解决方案2】：

为什么不通过类名而不是 ID 设置数据表，然后它可以同时应用于它们？

在检索数据时，您可以使用类似 $('.dataTableStyle').eq(1) 的方法从相关数据中获取信息。

【讨论】：

我尝试使用 class 而不是 id 但两者都没有发生任何事情。plugin 不适用于它们。
这可能是因为您的标签设置。阅读 Jquery 文档，了解如何使选项卡在屏幕外（例如 -2000 像素）而不是 display=none，因为使用默认选项卡设置时很多元素都不起作用。

【解决方案3】：

我正在使用 mvc3，我的问题是在视图中初始化数据表，然后用另一个数据表渲染部分视图。问题不在于 2 个表的 id，而在于部分视图在框架中呈现的方式。就我而言，我必须将脚本或对脚本的引用移动到承载局部视图的视图中。我在使用 Google Maps api 时遇到了类似的问题。

【讨论】：

【解决方案4】：

试试这个代码

$(document).ready(function() {
         oTable = $('#DataTables_Table_0').dataTable({   //DataTables_Table_0 <-------table id
                iVote: -1,   //your field name 
                "bRetrieve":true
            });

        oTable.fnSort( [ [1,'desc'] ] );
     });

【讨论】：

【解决方案5】：

当您要更改表格数据时，在函数事件中使用它

$('#tbl_resultates').dataTable().fnDestroy();

并添加

"bRetrieve": true,

在

$('#tbl_resultates').dataTable({

【讨论】：