使用 HTML 文本框搜索数据表列

如何解决使用 HTML 文本框搜索数据表列

我正在尝试使用数据表启用列搜索。我用 HTML 设置了你的搜索文本框：

<div class="col-lg-3 mb-lg-0 mb-6">
<label>Id:</label>
<input type="text" name="textBox[]" class="form-control datatable-input" placeholder="E.g: 1"  data-col-index="0" />
</div>
<div class="col-lg-3 mb-lg-0 mb-6">
<label>Amount:</label>
<input type="text" name="textBox[]" class="form-control datatable-input" placeholder="E.g: 4500" data-col-index="1" />
</div>

这是我的搜索 Ajax :

       function addSearchControl(json) {
            
            $("#searchTable thead");
            $("#searchTable").each(function (index) {
            
                    var searchControl = $('input[name="textBox[]"]');
                    searchControl.on('keyup',function () {
                        var indexDataTable = searchControl.index( this );
                        alert( this.value + ',' + indexDataTable );
                        empTable.column(indexDataTable).search(searchControl.val()).draw();

                    });
                
            });
        }

但只有第一个文本框在工作，当我在第二个文本框上输入内容时，我得到的索引为 1，但无法在第 1 列上搜索

这是用于下拉搜索我得到了值但它不搜索表格只是再次呈现表格：

$('#dropDownMenuKategorie :selected').text();   
                        $("#dropDownMenuKategorie").on('change',function() {
                            var textSelected = $('#dropDownMenuKategorie option:selected').val();
                                alert(textSelected);
                                empTable.column(9).search(textSelected).draw(); 
                        });

解决方法

也许您可以像这样更改 column().search() 方法

empTable.column(indexDataTable).search(this.value).draw();

示例：

<div class="col-lg-3 mb-lg-0 mb-6">
    <label>Name:</label>
    <input type="text" name="textbox[]" class="form-control datatable-input" placeholder="E.g: 1" data-col-index="0" />
</div>
<div class="col-lg-3 mb-lg-0 mb-6">
    <label>Position:</label>
    <input type="text" name="textbox[]" class="form-control datatable-input" placeholder="E.g: 4500" data-col-index="1" />
</div>
<div class="col-lg-12">
    <table id="searchTable" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
        </tbody>
    </table>
</div>


@section scripts{
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
    <script>
        $(document).ready(function () {
            var empTable = $("#searchTable").DataTable();
            $("#searchTable").each(function (index) {
                var searchControl = $('input[name="textbox[]"]');
                searchControl.on('keyup',function () {
                    var indexDataTable = searchControl.index(this);
                    //alert(this.value + ',' + indexDataTable);
                    empTable.column(indexDataTable).search(this.value).draw();
                });
            });
        })
    </script>
}

结果：