数据表 javascript 不起作用

Question

我正在使用数据表对表进行排序，但是当我执行程序时，只执行存储在表中的数据；并且无法对表格进行排序。我已经在 html 中尝试过它并且它可以工作，但是当涉及到剃刀视图时无法排序。我已将此添加到 bundleconfig.cs

 bundles.Add(new ScriptBundle("~/bundles/table").Include(
                    "~/Scripts/jquery.dataTables.js"));

查看

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        $('#data-table').DataTable();
    });

</script>

<table id="data-table">
<thead>
    <tr>
        <th class="col-lg-3 tablehead">Item Number</th>
        <th class="col-lg-3 tablehead">Description</th>
        <th class="col-lg-3 tablehead">Quantity</th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td class="col-lg-3 tabledata">@item.itemNumber</td>
            <td class="col-lg-3 tabledata">@item.description</td>
            <td class="col-lg-3 tabledata">@item.quantity</td>
        </tr>
    }
</tbody>

编辑 调试后发现我在这里遇到错误 $('#data').DataTable();。错误：对象不支持属性或方法“DataTable”。

Answer 1

将您的代码更改为：

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>


<table id="data-table">
<thead>
    <tr>
        <th class="col-lg-3 tablehead">Item Number</th>
        <th class="col-lg-3 tablehead">Description</th>
        <th class="col-lg-3 tablehead">Quantity</th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td class="col-lg-3 tabledata">@item.itemNumber</td>
            <td class="col-lg-3 tabledata">@item.description</td>
            <td class="col-lg-3 tabledata">@item.quantity</td>
        </tr>
    }
</tbody>
</table>
<script type="text/javascript">

    $(document).ready(function () {
        $('#data-table').DataTable();
    });

</script>

您需要在 DataTables 库之前加载 jquery 库。您还错过了结束表标记。而且我总是在 DOM 加载表后初始化数据表。

工作小提琴here