Использование jquery datatable для строк динамической таблицы

Question

Я строю таблицу динамически, используя 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, чтобы данные не могли быть добавлены более одного раза и которая применяет последнюю динамическую таблицу?

Answer 1

Посмотрите на fnReloadAjax пользовательская функция плагина Datatables...