如何在数据表上为每个列过滤器添加文本输入过滤器？

Question

我正在开发 ANSP.net MVC 应用程序，我面临的问题是无法在每列顶部添加文本输入过滤器来过滤与每列相关的数据，这意味着我的数据表有 3 列

RequestNo 

和

EmpId

和

EmpName

。

因此，我将为 3 列添加 3 个输入框过滤器，每列来自

requestNo

和

EmpId

和

EmpName

。

所以形状将是：

RequestNo                 EmpId                     EmpName

input text box filter    input text box filter    input text box filter

每个输入文本框都会过滤与其相关的列

如何使用 jQuery 或 JavaScript 来做到这一点？

 <table id="dtbl" class="table table-bordered table-hover table-striped" style="width:100%;padding-left:5px;padding-right:7px;">
        <thead>
            <tr style="background-color: #f2f2f2;">

                <th style="border: 1px solid black;">
                    @Html.DisplayNameFor(model => model.RequestNo)
                </th>
                <th style="border: 1px solid black;">
                    @Html.DisplayNameFor(model => model.EmpID).ToString().Replace(":", "")
                </th>
                <th style="border: 1px solid black;">
                    @Html.DisplayNameFor(model => model.EmpName).ToString().Replace(":", "")
                </th>
                <th style="border: 1px solid black;">View Form</th>
              
            </tr>
        </thead>

        <tbody>
            @foreach (var item in Model)
            {
                <tr style="background-color: #f2f2f2;">

                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.RequestNo)
                    </td>
                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.EmpID)
                    </td>
                    <td style="border: 1px solid black;">
                        @Html.DisplayFor(modelItem => item.EmpName)
                    </td>
                    <td style="border: 1px solid black;">
                        @Html.ActionLink("View Form", "Details", new { id = item.RequestNo })
                    </td>
                    
                  
                </tr>
            }
        </tbody>

    </table>
</div>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<script>
        $(document).ready(function () {
            $('#dtbl').DataTable({
                "scrollX": true,
                "pageLength": 10,
                dom: 'Bfrtip',
             
                initComplete: function () {
                    // Remove export buttons
                    $('.buttons-excel, .buttons-pdf, .buttons-print, .buttons-csv, .buttons-copy').remove();
                }
            });
        });

更新帖子

我会用红色显示你想要的结果，如下

我尝试在下面添加 jQuery 代码，它会绘制用于搜索的单元格输入

但是当我尝试搜索时你搜索任何不起作用的东西。

我的问题是为什么搜索不适用于任何单元格输入

意思是如果员工姓名有

michel

并且我写

michel

或部分

从word中看它不起作用，为什么？

$('#dtbl thead th').each(function () {
                var title = $(this).text();
                if (title !== 'View Form' && title !== 'Print' && title !== 'Print Arabic') { // Exclude the 'View Form' column
                    $(this).html('<input type="text" placeholder="Search ' + title + '" />');
                }
            });

            // Apply the search
            table.columns().every(function () {
                var that = this;

                $('input', this.header()).on('keyup change', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                });
            });

最后问题搜索仍然存在，但用于搜索绘制的单元格输入 那么如何解决问题？

Answer 1

我通过对每列成功应用过滤器来为数据表的每列单独添加过滤器

解决了我的问题

    $(document).ready(function () {
        

        new DataTable('#dtbl', {
            "dom": 'rtip',
            initComplete: function () {
                $('#dtbl tfoot tr').insertAfter($('#dtbl thead tr'))
                this.api()
                    .columns()
                    .every(function () {
                        let column = this;
                        let title = column.footer().textContent;

                         //Create input element
                        let input = document.createElement('input');
                        input.placeholder = title;
                        column.footer().replaceChildren(input);

                        //var input = $('<input type="text" placeholder="' + title + '" />');

                        //// Append input element to the footer cell
                        //$(column.footer()).html(input);

                        // Event listener for user input
                        input.addEventListener('keyup', () => {
                            if (column.search() !== this.value) {
                                column.search(input.value).draw();
                            }
                        });
                    });
            }
        });
  });