How to add text input filter on Data Table for every column filter?

Question

I work on an ANSP.net MVC app, and I face the issue that I can't add text input filter on top of every column to filter data related to every column with another, meaning I have data table have 3 columns RequestNo and EmpId and EmpName.

So I will add 3 input box filter for 3 column every column from requestNo and EmpId and EmpName.

So the shape will be:

RequestNo                 EmpId                     EmpName

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

every input text box will filter column related to it 

How to do it using jQuery or 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();
                }
            });
        });

updated post

I will show you desired result with red color as below

​

what I try Add jQuery code below and it draw cells input for search

but You search for any thing not work when I try to search .

My question why search not working for any cell input please

meaning if employee name have michel and I write michel or part

from word it will not work why ?

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

Finally Issue Search still Exist but cell input for search Draw so How to solve issue ?

Answer 1

I Add filter individually per every column for Data Table by apply filter for every column success

and solved my issue

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