Question

我有一个数据表。我从数据集中获取数据并填充到数据表中。我指的是https://datatables.net/examples/basic_init/zero_configuration.html.i添加了数据表和jquery的引用仍然面临着查看数据表功能的问题。我无法看到搜索框和分页选项。

视图

@using System.Data
@model DataSet
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

    <meta name="viewport" content="width=device-width" />
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="    https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"></script>
    <title>Index</title>
    <table id="example" class="display" width="100%" cellspacing="0">
        <tr>
            <th>Date</th>
            <th>Use case</th>
            <th>Id</th>
            <th>SMS</th>
        </tr>
        @foreach (DataRow row in Model.Tables[0].Rows)
        {
            <tr>
                <td>@row["updtd_date"]</td>
                <td>@row["usecase"]</td>
                <td>@row["id"]</td>
                <td>@row["sms"]</td>

            </tr>
        }
    </table>


@section scripts{
    <script>
        $(document).ready(function () {
            $('#example').DataTable();
        });
</script>
    }

Answer 1

1-添加对datatables脚本的引用。

2-将thead和tbody添加到您的表格中。

<table id="example" class="display" width="100%" cellspacing="0">
 <thead>
    <tr>    
     <th>Date</th>
     <th>Use case</th>
     <th>Id</th>
     <th>SMS</th>
    </tr>
 </thead>
 <tbody>
   @foreach (DataRow row in Model.Tables[0].Rows)
   {
    <tr>
     <td>@row["updtd_date"]</td>
      <td>@row["usecase"]</td>
      <td>@row["id"]</td>
      <td>@row["sms"]</td>
     </tr>
   }
 </tbody>
</table>

Answer 2

请将您的脚本参考更改为：

<script src="    https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.js"></script>

数据表搜索选项和分页不在mvc视图中显示

2 个答案: