jQuery datatable searching is not working properly

Question

I'm working on a project where I have to use a jQuery datatable for efficient searching. Unfortunately, jQuery datatable searching, page filtring are not working properly as it has to work.

Here is the code which i used for said purpose. Here is the image link too

    <link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
    <script src="//code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function () {
                $("#dataTable").DataTable();
            });
    </script>

razor view code.


<table id="dataTable" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Page)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.cityDisplayName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.countryDisplayName)
            </th>

            <th></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Page)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.cityDisplayName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.countryDisplayName)
            </th>

            <th></th>
        </tr>
    </tfoot>

    @foreach (var item in Model.ListVisitorLocation)
            {
        <tbody>
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Page)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.cityDisplayName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.countryDisplayName)
                </td>

                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.ConnectionId }) |
                    @Html.ActionLink("Details", "Details", new { id = item.ConnectionId }) |
                    @Html.ActionLink("Delete", "Delete", new { id = item.ConnectionId })
                </td>
            </tr>
        </tbody>
    }

</table>

What happens is the search only applies the operation on the first row of the table.

**unfortunately, jquery datatable searching is not working properly as it has to work**. Please be more specific? What is not as per expectation ? — Mayank Pandeyz, Jul 18 '17 at 10:22
Do you think your case might need this: [jQuery DataTables - Accent-Insensitive Alphabetization and Searching](https://stackoverflow.com/questions/21833584/jquery-datatables-accent-insensitive-alphabetization-and-searching)? — tgogos, Jul 18 '17 at 10:29
don't you think @tgogos it should work as it is? in my view code is absolutly fine. i use the same code as it is written over jquery datatable main website — Wasif Bhatti, Jul 18 '17 at 10:43
https://stackoverflow.com/questions/45147727/generate-js-script-using-signalr-for-client-websites — Wasif Bhatti, Jul 18 '17 at 10:58

Joey Pinto · Accepted Answer · 2017-07-18T10:50:39.353

1

Check your tbody tag it should be outside the foreach loop. Right before the loop begins and after it ends. Else you will have a tbody for each row.

Because of this mistake datatables was considering you have a table of only one row as it scanned only the first tbody.

It should be

<tbody>
   @foreach (var item in Model.ListVisitorLocation)
        {

        <tr>
            <td>
             .
             .
            </td>
        </tr>

    }
 </tbody>

Also the search query you entered 'ranjhe' does not really match with ránjhe in the table and hence no matches were found

edited Jul 18 '17 at 10:50

answered Jul 18 '17 at 10:25

Joey Pinto

1,735
1
18
34

please check image carefully ranjhe is in the list – Wasif Bhatti Jul 18 '17 at 10:37
u are to some axtent – Wasif Bhatti Jul 18 '17 at 10:38
Cant you see the accent (little dash) over the 'a' – Joey Pinto Jul 18 '17 at 10:38
but filteration should show nthng instead of all records – Wasif Bhatti Jul 18 '17 at 10:38
yeah i have seen – Wasif Bhatti Jul 18 '17 at 10:39
Have a look at your browser console, is it showing any error? – Joey Pinto Jul 18 '17 at 10:39
this is the problem error also not showing. i use the same code as it is shown over jquery datatable main website – Wasif Bhatti Jul 18 '17 at 10:40
Just try putting the datatables script tag at the end of the body – Joey Pinto Jul 18 '17 at 10:41

jQuery datatable searching is not working properly

1 Answers1