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>