using jquery datatable for dynamic table rows

Question

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?

Answer 1

Take a look at the fnReloadAjax custom function of the Datatables plugin ...