使用 jquery datatable 动态表行

发布于 2024-08-19 15:32:04 字数 1299 浏览 4 评论 0原文

我正在使用 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 函数，以使数据表不被添加多次并应用最新的动态桌子？

原文

I am constructing the table dynamically using jquery/javascript. I have a several links based on which the table body will be generated dynamically using json/jquery.

I like to integrate the jquery datatable with the dynamically created table. How can i attach the .dataTable() for the dynamically created rows.

When i tried to use in document.ready, the table holds the values of the first time created table.

My javascript look like:

    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();
        });
   }

With the above js function, it'll add the datatable for each click of the links.

dataTable() is a jquery plugin which gives sort, paging and search functionalities to the html table. The plugin dynamically adds textbox for searching and a pager for paging.

The problem i am facing is When i click on one of links, i build the table dynamically and the dataTable() adds up again another textbox and pager and gives previous created result in search and paging. I need to avoid this as well the dataTable() functionality should work for the latest dynamic table content

How can i rephrase this js function for the datatable not to get added more than once and which applies the latest dynamic table?

分享到QQ

分享到微博