Bootstrap 4 - DataTable 搜索不适用于 jQuery 添加的行

Question

我的 Bootstrap 4 搜索工具有问题。如果在tbody 中手动添加行，则搜索有效，但如果我从 jQuery 添加新行，则搜索不会看到这些行。

这是表格的主体。 下面是向表格添加新行的函数：

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() 函数添加的行没有出现在搜索中，不仅如此，当我搜索某些内容时它们完全消失了。

我错过了什么，也许我应该在添加新行后更新表格？

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>