Bootstrap 4 - 数据表搜索不适用于 jQuery 添加的行

Question

I have a problem with the Bootstrap 4 search tool. If the rows are added manually in tbody the search works, but if I add a new row from jQuery then search doesn't see those rows.

This is the body of the table. Below is the function that adds a new row to the table:

 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>

I don't know why, but the rows added with the addProduct() function don't appear in the search, and not only that, but they disappear completely when I'm searching for something.

What am I missing, maybe I should update the table after I add a new row?

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>