DataTables搜索和過濾包含輸入字段的動態添加的行

Question

http://jsfiddle.net/v7rjqogy/15/

有兩件事是錯誤的。 第一：

當我添加新行，然后在輸入中填寫一些文本時，如何使用搜索功能？

其次（這一點更重要）

您會注意到，我在頁面頂部添加了一個自定義過濾器：強度：和按劑量下拉列表。 這些與表格中的強度和劑量列相對應。 我添加了代碼以使其按這些進行搜索，但是它始終不顯示任何返回的行。

$(document).ready(function () {

    $.fn.dataTableExt.ofnSearch["html-input"] = function (value) {
        return $(value).val();
    };

    var table = $("#lines").DataTable({
        "searching": true,
        "ordering": true,
        columnDefs: [
            { "targets": [15, 16], "searchable": false, "orderable": false },
            { "type": "html-input", "targets": [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14] }
        ],

    });

    $("#lines td input").on("change", function () {
        var td = $(this).parent();

        console.log($(this).parent().find("input").val());
        table.row($(this).closest("tr")).invalidate();
    });

    // Apply the search
    $("#strength_search").on("change", function () {
        table
            .columns(6)
            .search(this.value)
            .draw();
    });
    $("#dose_search").on("change", function () {
        table
            .columns(7)
            .search(this.value)
            .draw();
    });

});

此處無法粘貼太多HTML。 小提琴將向大家展示。

Answer 1

在主表下創建如下所示的內容：

 <table>
    <tr><th>Brand Name</th></tr>
    <tr><td><input id="abrand_name0" name="brand_name[]" value="" size="15" type="text"></td></tr>
        <tr><td><button id="insert" onclick="">Insert line</button></td><tr>
</table>

並添加行：

var oTable =  $('#lines').dataTable();
    oTable.fnAddData( [
        "<input name='brand_name[]' id='brand_name" + servln + "' size='15' value="+$('#abrand_name0').val()+ ">"]);