如何在不同 jquery ui 选项卡中的 gridviews 中使用 jquery Datatable 插件？答案

【问题标题】：How do i use jquery Datatable plugin in gridviews present in different jquery ui tabs?如何在不同 jquery ui 选项卡中的 gridviews 中使用 jquery Datatable 插件？
【发布时间】：2014-05-01 06:28:08
【问题描述】：

我在 jquery ui 选项卡中的 gridview 中使用 jquery 数据表插件。我的代码是

<script type="text/javascript">
 $(function () {
            var gv = $('.display');
            var thead = $('<thead/>');
            thead.append(gv.find('tr:eq(0)'));
            gv.append(thead);
            gv.dataTable({
                "sPaginationType": "full_numbers",
                "iDisplayLength": 10,
                "aaSorting": [],
                "bDestroy": true,
                "bRetrieve": true,
                'bProcessing': true,
                'bServerSide': false
            });

            ApplyDataTable('.display');
        });

我在 gridview 中使用class="display" 在其上应用数据表插件，如果任何 ui 选项卡中有一个 gridview，这个插件对我来说工作正常。

在 3 个不同的选项卡中存在 3 个网格视图。当我在其他网格视图上应用 class="display" 时，网格视图的标题行变为三重显示所有网格视图中所有三个网格视图的标题行。我如何解决这个问题并使用这个插件在我所有的网格视图中？。

【问题讨论】：

你能不能显示一下，所以很容易帮助你

标签： jquery asp.net jquery-plugins jquery-datatables

【解决方案1】：

EDIT 使用.display 类使每个具有该类的网格都附加，因此，每次运行时，附加到当前网格并附加以前的网格。

ApplyDataTable('.display') 应用于所有具有.display 类的网格

解决方案使用 Id="" 即 $('#grid1') 而不是 $('.display')

或使用

           thead.html(gv.find('tr:eq(0)'));
           gv.html(thead);

代替

           thead.append(gv.find('tr:eq(0)'));
           gv.append(thead);

【讨论】：

【解决方案2】：

1-对于标题部分，你应该分开处理每个实例：

$('.display').each(function(){
    var tbl = $(this);
    var thead = $('<thead/>');
    thead.append(tbl.find('tr:eq(0)'));
    tbl.append(thead);
});

2- 调用$('.display').dataTable({ options }) 等价于$('.display').each(function({ $(this).dataTable({ options }); });

3- 根据ApplyDataTable 的内容，您可能需要将此调用移动到.each 循环内。

【讨论】：