jquery - 如何将 JQuery Datatable.net 与 ASP.Net 4 Razor 和 Twitter Bootstrap 结合使用

Question

我想将 jQuery 数据表与 ASP.net MVC 和 Twitter Bootstrap 一起使用。

有人已经这样做了吗？

Answer 1

这可能是一篇旧帖子，但我只是想补充一下我是如何设置的。看起来比上面 codea 的做法要简单。

1) 在您看来，只需像平常一样创建表(使用 @foreach 或类似的东西)并为其指定 ID jqueryTable。然后下载以下3个文件并将它们放入~/Scripts/和~/Content/文件夹中:

dataTables.bootstrap.css

jquery.dataTables.js

dataTables.bootstrap.js

现在使用以下代码将这些文件添加到您的 BundleConfig.cs 文件中:

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

bundles.Add(new StyleBundle("~/Content/datatables").Include(
    "~/Content/dataTables.bootstrap.css"));

最后，将以下内容添加到创建表的 View 中(请注意，JS 文件顺序很重要!):

@Styles.Render("~/Content/datatables")

@section Scripts {
    @Scripts.Render("~/Scripts/datatables")

    <script type="text/javascript" language="javascript">

        /* Table initialization */
        $(document).ready(function() {
            $('#jqueryTable').dataTable();
        });

    </script>
}

上面的 JS 代码只是找到您的表(ID 为 jqueryTable)并初始化其上的数据表 JS。此外，要使其正常工作，~/bundles/jquery 需要包含在您的 _Layout.cshtml 文件中(默认情况下应该如此)。