Click here to Skip to main content
15,851,514 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
I work on ASP.NET MVC app. I am facing an issue. I can't add text input filter on top of every column to filter.

With another meaning, I have a datatable that has 3 columns, RequestNo, EmpId and EmpName.

So I will add 3 input box filters for 3 columns. Every column from requestNo, EmpId and EmpName.

So it will be:

input text box input text box input text box
RequestNo EmpId EmpName


Every input text box will filter column related to it.

So please tell me how to do it using JQuery or JavaScript ?

What I have tried:

HTML
<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>
        $(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();
                }
            });
        });
Posted
Updated 12-Oct-23 10:50am
v2

1 solution

Oh look: another day, another zero-effort "do my work for me" question from our resident help vampire.

It's not like 30 seconds in Google would yield an exact example of what you're trying to do[^], is it? 🤦‍♂️

But why bother learning, or doing your own research, when you can just turn up here and demand that someone else does your job for you?
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900