数据表在 asp.net mvc 4 中不起作用答案

【问题标题】：DataTables not working in asp.net mvc 4数据表在 asp.net mvc 4 中不起作用
【发布时间】：2015-05-06 10:02:59
【问题描述】：

我正在尝试使用 asp.net mvc 4 和 EF6 制作一个网站，用户可以在其中对表格使用来自客户端的排序、分页和过滤。我正在为这些功能使用DataTables 1.10.4 jQuery 插件。到目前为止，一切都已完美加载，但如果我单击 <th> 内容，列无法排序，无论我在过滤器框中键入什么，过滤都不起作用。我在浏览器控制台中没有看到任何错误。这是我的代码，

控制器

public ActionResult UserLogin()
    {
        if (Session["UserNAME"] != null)
        {
            var mkimodel = new MkistatVsUserLogin { mkistats = db.mkistats.ToList() };
            return View(mkimodel);
        }
        else
        {
            return RedirectToAction("Home");
        }
    }

查看

<table id="mktTable" class="table">
<thead>
<tr>
    <th>CodeName</th><th>% Change</th><th>High Price</th><th>Open Price</th><th>Total Value</th>
</tr>
</thead>
@foreach (var item in Model.mkistats)
{
<tbody>
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.MKISTAT_CODE)
    </td>
    <td>
        5%
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.MKISTAT_HIGH_PRICE)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.MKISTAT_OPEN_PRICE)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.MKISTAT_TOTAL_VALUE)
    </td>        
</tr>
</tbody>
}
</table>

_Layout.cshtml

<head>
<link href="~/Content/jquery.dataTables.css" rel="stylesheet" />
</head>

<body>
    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/DataTables-1.10.4/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#mktTable').DataTable();
        });        
    </script>
    @RenderBody()
    @RenderSection("scripts", required: false)
</body>

我的代码有问题吗？我怎样才能使dataTables 工作？非常需要这个帮助。 Tnx。

【问题讨论】：

您是否在浏览器中看到任何控制台错误？
将alert 放入你的js 并检查你的javascript 代码是否工作
@FrebinFrancis，不，我没有看到任何错误。
@Sin Oscuras 你有一个通用的搜索文本框或每列的搜索文本框吗？
@NadeemKhan，我还有另一个 jQuery 脚本，这里没有提到。如果那行得通，那么数据表也应该如此。一定是dataTables插件有问题。

标签： jquery asp.net asp.net-mvc jquery-datatables

【解决方案1】：

将此添加到您的数据表初始化代码中。

$('#mktTable').DataTable({
"aoColumns": [
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true }
]
});

在这里，您必须添加与表中一样多的列。您也可以通过设置"bsortable":false 来禁用对特定列的排序。每列都指向表中列的索引。例如，如果你想禁用第一列的排序，你会这样写

$('#mktTable').DataTable({
"aoColumns": [
{ "bSortable": false },
{ "bSortable": true },
{ "bSortable": true },
{ "bSortable": true }
]
});

编辑

您已经在 foreach 循环中编写了 tbody 标签。从 foreach 循环中取出它。

【讨论】：

如果我愿意，我可以跳过一些吗？还是我必须为所有列添加？
跳过是什么意思？
意思是，如果我不想对最后 3 列进行排序，我还应该为此添加 bSortable 吗？
yes 添加 bsortable 并将最后 3 列设置为 false。
按F12查看浏览器控制台，看看有没有错误？