对动态表行使用 jquery 数据表

Posted 2023-05-09

【中文标题】对动态表行使用 jquery 数据表

【英文标题】：using jquery datatable for dynamic table rows

【发布时间】：2011-01-10 09:51:17

【问题描述】：

我正在使用 jquery/javascript 动态构建表。我有几个链接，基于这些链接将使用 json/jquery 动态生成表体。

我喜欢将 jquery 数据表与动态创建的表集成。我如何为动态创建的行附加.dataTable()。

当我尝试在 document.ready 中使用时，该表保存了第一次创建表的值。

我的 javascript 看起来像：

    function GetProducts(Id) 
       $('#tProductListBody').html('');

       $.getJSON("/Product/GetProducts/?t=" + new Date(),  catId: Id ,
        function(data) 
            var _productsBodyHtml = '';
            if (data != null && data != false) 
            for (i in data) 
                var _product = data[i];
                _productsBodyHtml += '<tr><td>' + _product.ProductName + '</td>';
                _productsBodyHtml += '<td>' + _product.QuantityInHand + '</td><td>' + _product.Price + '</td></tr>';
            
            
            $('#tProductListBody').html(_productsBodyHtml);
            $('#tProductList').dataTable();
        );
   

通过上面的js函数，它会为每次点击链接添加数据表。

dataTable() 是一个 jquery 插件，它为 html 表提供排序、分页和搜索功能。该插件动态添加用于搜索的文本框和用于分页的寻呼机。

我面临的问题是，当我单击其中一个链接时，我会动态构建表格，dataTable() 再次添加另一个文本框和寻呼机，并在搜索和寻呼中给出先前创建的结果。我也需要避免这种情况，dataTable() 功能应该适用于最新的动态表格内容

我如何改写这个 js 函数以使数据表不被多次添加并且应用最新的动态表？

【参考方案1】：

看看Datatables插件的fnReloadAjax自定义函数...

【讨论】：

在 asp.net mvc(C#) 中是否有任何示例可以引用“sAjaxSource”和“fnReloadAjax”。