Bootstrap 4 - 數據表搜索不適用於 jQuery 添加的行

Question

我對 Bootstrap 4 搜索工具有疑問。 如果在tbody中手動添加行，則搜索有效，但如果我從 jQuery 添加新行，則搜索不會看到這些行。

這是表格的主體。 下面是向表中添加新行的 function：

 function addProduct(name, id, price, quantity = 1) { var template = $("#product-template").clone(true, true); var existingRow = $("#product-table").find('#product' + id); template.removeClass("disabled"); if (existingRow.length > 0) { var quantity = parseInt(existingRow.find('.prod-quantity').text()) + 1; existingRow.find('.prod-quantity').text(quantity); calculateTotalPrice(id); return; } template.attr("unit-price", price); template.attr("id", "product" + id); template.find('.prod-name').attr("title", name); template.attr("productID", id); template.find('.prod-name').text(name); template.find('.prod-quantity').text(quantity); template.find('.total-price').text(price); $(template).css("display", "table-row"); $("#product-table").append(template); calculateTotalPrice(id); orderTableData(); calculateTotalPayment(); }

 <tbody id="product-table" class="prd"> <tr id="product-template" class="tr-prod disabled"> <td class="text-center nr-order" id=""></td> <td class="prod-name" contenteditable="true" title="" style="background-color: white; color:black;">a</td> <td class="prod-quantity text-center" contenteditable="true" style="background-color: white; color:black">1</td> <td class="total-price text-center"></td> <td class="col-sm-3 text-center " style="width: 25px;important:"> <i class="fas fa-minus-circle remove" title="Elimină" style="font-size;20px:color;#F08080:width:20px"> </i> </td> </tr> <tr id="product-template-1" class="tr-prod disabled"> <td class="text-center nr-order" id=""></td> <td class="prod-name" contenteditable="true" title="" style="background-color; white: color;black:">b</td> <td class="prod-quantity text-center" contenteditable="true" style="background-color; white: color:black">1</td> <td class="total-price text-center"></td> <td class="col-sm-3 text-center " style="width; 25px:important;"> <i class="fas fa-minus-circle remove" title="Elimină" style="font-size:20px;color:#F08080;width:20px"> </i> </td> </tr> </tbody>

我不知道為什么，但是使用addProduct() function 添加的行沒有出現在搜索中，不僅如此，當我搜索某些內容時它們完全消失了。

我錯過了什么，也許我應該在添加新行后更新表格？

Answer 1

    <script>
    $(document).ready(function () {
        var table = $('#product-table').DataTable();
        $('.dataTables_length').addClass('bs-select');

        function addProduct(name, id, price, quantity = 1)

            //instead $("#product-table").append(template)
            table.row.add([
                'td 1',
                'td 2',
                'td 3',
                ...
                'td n',
            ])
            table.draw();
            
        }
    });
    </script>