Question

我想使用DataTable插件为我的表添加分页，排序和过滤。

这是布局视图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @Styles.Render("~/Content/css")
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <header>
        <div class="content-wrapper">
        </div>
    </header>
    <div id="body">
        @RenderSection("featured", required: false)
        <section class="content-wrapper main-content clear-fix">
            @RenderBody()
        </section>
    </div>
    <footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>

    @Scripts.Render("~/bundles/jquery")
    <script src="jquery-1.9.1.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <script src="jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#p_table").dataTable();
        });
    </script>

    @RenderSection("scripts", required: false)
</body>
</html>

这是页面视图中的表格：

<table id="p_table" class="table table-responsive table-bordered table-striped table-hover">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model => model.id)</th>
            <th>@Html.DisplayNameFor(model => model.first_name)</th>
            <th>@Html.DisplayNameFor(model => model.last_name)</th>
            <th>@Html.DisplayNameFor(model => model.gender)</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.id)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.first_name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.last_name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.gender)
                </td>                
            </tr>
        }
    </tbody>
</table>

我已成功添加了所有javascript文件和样式表，但未应用DataTable效果。我正在使用MVC4。

请帮助。

DataTable无效

0 个答案: