如何在ASP.Net 4 Razor和Twitter Bootstrap中使用JQuery Datatab

1)在您的视图中,只需像正常一样创建表(使用@foreach或其他类似的东西)并为其指定一个jqueryTable的ID.然后下载以下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"));

最后,将以下内容添加到您创建表的视图中(请注意,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文件中(默认情况下应该是这样).