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 modified data table to add search filter on every column ?   

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

Answer 1

Hi @Ahmed Abd El Aziz,

DataTables is a plugin for the jQuery Javascript library. You need to use jquery.dataTables.min.js file,add <tfoot> for filtering.Specific information can be found in the code below.

https://datatables.net/

<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

All Code

<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>
    <tfoot>
        <tr>
            <th>RequestNo</th>
            <th>EmpID</th>
            <th>EmpName</th>

        </tr>
    </tfoot>

</table>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>

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

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


    });
</script>

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.