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

我在一个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或部分
从字面上看，它不会工作为什么？

$('#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();
                    }
                });
            });

最后问题搜索仍然存在，但单元格输入搜索绘图，所以如何解决问题？

我添加过滤器单独每列数据表通过应用过滤器每列成功
解决了我的问题

$(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();
                            }
                        });
                    });
            }
        });
  });

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

1条答案

相关问题

热门标签

最新问答