Question

我正在开发一个项目，我必须使用jQuery数据表进行高效搜索。不幸的是，jQuery数据表搜索，页面过滤器不能正常工作，因为它必须工作。

这是我用于上述目的的代码。 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>

搜索结果仅适用于表格第一行的操作。

Answer 1

检查你的tbody标签它应该在foreach循环之外。在循环开始之前和结束之后。否则你每行都会有一个tbody。

由于这个错误，datatables正在考虑你只有一行的表，因为它只扫描了第一个tbody。

应该是

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

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

    }
 </tbody>

您输入的搜索查询'ranjhe'与表格中的ránjhe并不匹配，因此找不到匹配项

jQuery数据表搜索无法正常工作

1 个答案: