Question Can't add search filter for every column separated using Datable jQuery ?

[ahmedaziz]

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

 

[jmcilhinney]

If you want an extra row in your table, add an extra row. You are adding one row for the headers, then you have a loop adding a row for each model item. If you expect an extra row to appear between them, you need to add the code for an extra for between them. You don't use JavaScript or jQuery for that. The script code will be used to process the filter but not display the filter fields in the first place.

 

[ahmedaziz]

can you help me by one sample
i try and search input for every column drawn success
but search not working
so can you help me please

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

            // Initialize search functionality
            var table = this.api();

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