数据表在 mvc 的视图页面中的我的表上不起作用

Posted 2023-02-26

【中文标题】数据表在 mvc 的视图页面中的我的表上不起作用

【英文标题】：data table is not working on my table in view page in mvc

【发布时间】：2017-10-18 10:34:45

【问题描述】：

我想将表格设为数据表，但它不适用于我的表格。数据表在静态表中工作，但是当我添加动态表时，它没有显示任何数据表功能，如搜索选项和分页。所有在时间显示的记录，即使它在分页中选择了 10。

代码

   <script>
            $(document).ready(function () 
                $('#example').DataTable();
            );
        </script>


    <table id="example" class="display"  cellspacing="0">
    <thead>
        <tr>
            <th>deviceid</th>
            <th>status</th>
            <th>UpdatedTime</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>deviceid</th>
            <th>status</th>
            <th>UpdatedTime</th>
        </tr>
    </tfoot>

@foreach (var item in Model)

    <tbody>
        <tr>
            <td>@html.DisplayFor(modelItem => item.deviceid)</td>
            <td>@Html.DisplayFor(modelItem => item.status)</td>
            <td>@Html.DisplayFor(modelItem => item.UpdatedTime)</td>
        </tr>
    </tbody>

</table>

【问题讨论】：

我已经引用了数据表的 js 和 css 文件。同时用一些内容替换静态表，它显示数据但不能使用动态表。控制台错误-TypeError：c 未定义

我检查过了。在我的代码中，我已经关闭了表格标签。我的问题是表格显示所有记录，而不是根据分页下拉值显示记录，搜索选项也不起作用。我认为可能需要更改 @foreach 循环。

【参考方案1】：

您添加以下所有内容

//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css
//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js
//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js
//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js

示例链接：https://jsfiddle.net/r8gd2227/3/

【参考方案2】：

试试这个：

$(document).ready(function () 
            $('#example').DataTable();
        );

【讨论】：

我的真实代码我使用了正确的表格 ID。我已经用 id 更新了我的问题。还是不行。

【参考方案3】：

<table id="example" class="display"  cellspacing="0">
    <thead>
        <tr>
            <th>deviceid</th>
            <th>status</th>
            <th>UpdatedTime</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>deviceid</th>
            <th>status</th>
            <th>UpdatedTime</th>
        </tr>
    </tfoot>

    <tbody>
@foreach (var item in Model)

         <tr >
            <td>@Html.DisplayFor(modelItem => item.deviceid)</td>
            <td>@Html.DisplayFor(modelItem => item.status)</td>
            <td>@Html.DisplayFor(modelItem => item.UpdatedTime)</td>
        </tr>

    </tbody>
</table>