将 jQuery DataTable 插件应用于从 ASP.NET 动态生成的表

Posted 2023-05-09

【中文标题】将 jQuery DataTable 插件应用于从 ASP.NET 动态生成的表

【英文标题】：Applying a jQuery DataTable plug-in to dynamically generated tables from ASP.NET

【发布时间】：2012-08-14 23:11:50

【问题描述】：

我的要求如下：

在我的 ASPX 页面中，我使用 fileUpload 从电子表格中导入数据并动态生成一个 ASP.NET 表。表格行和列的维度和数据由文件本身设置 - 这意味着我的应用程序在导入数据之前不知道行和列。

我想做的是将 jQuery DataTables 插件应用到我的动态生成的表中。当用户单击页面上的 Import 按钮时，将生成该表。

我遇到的问题是格式化表格的 jscript 在表格可用之前运行，因此 DataTable 插件抱怨列。错误如下：

无法获取属性“aoColumns”的值：对象为空或未定义

我尝试将以下代码添加到我的 Button_Click 事件中，但它发生在表格加载之前：

ClientScript.RegisterClientScriptBlock(Me.GetType(), "FormatTable", "FormatTable();", True)

jscript 如下：

  function FormatTable() 
                    var oTable = $('#tblMyTable).dataTable(
                        "bJQueryUI": true,
                        "sScrollY": "300px",
                        "sScrollX": "100%",
                        "sScrollXInner": "150%",
                        "bScrollCollapse": true,
                        "bPaginate": false
                    );
                    new FixedColumns(oTable);
    ;

我确保表格格式正确，包括 table、thead、tr、th、tbody、tr、td。当表格从后面的代码生成时，它被插入到服务器占位符控件中。

所以我的问题是：如何使用 jQuery DataTables 插件成功格式化服务器生成的表？非常感谢您的帮助。

【参考方案1】：

在这种情况下，您希望您的代码在 DOM 准备好后执行。 为此 jQuery 提供了ready 函数。

只有在 DOM 如下准备好之后，才调用您的 FormatTable。

ClientScript.RegisterClientScriptBlock(Me.GetType(), "FormatTable", 
                    @"$(document).ready(function() FormatTable(););", True);

【讨论】：

嗨，nunespascal。你的建议非常有效。非常感激。我已经启动并运行了。