Question

我有Html代码，可生成包含大量记录的表。

以下是代码：

 @model IEnumerable<UserContact>
    @{
        ViewBag.Title = "Contacts:";
    }
    <h2>
        Contacts</h2>
    <table>
        <tr>
            <th>
                @Html.DisplayText("First Name")
            </th>
            <th>
                @Html.DisplayText("First Name")
            </th>
            <th>
                @Html.DisplayText("Email")
            </th>
            <th>
            </th>
        </tr>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.CheckBox("misha", new { onclick = "this.form.submit();" })
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.firstName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.lastName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.email)
                </td>
            </tr>
        }
    </table>

此代码包含在剃刀部分视图页面中。

我的问题是如何在上面描述的表格中创建分页？

Answer 1

根据您的评论，我在这里展示了数据表的完整示例：

Jquery和CSS参考： -

链接： -

http://code.jquery.com/jquery-1.11.1.min.js

http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js

http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css

您的部分视图： -

@model IEnumerable<UserContact>
@{
    ViewBag.Title = "Contacts:";
}
<h2>
    Contacts</h2>
<table id="mydatatable">
  <thead>
    <tr>
        <th>
            @Html.DisplayText("First Name")
        </th>
        <th>
            @Html.DisplayText("First Name")
        </th>
        <th>
            @Html.DisplayText("Email")
        </th>
        <th>
        </th>
    </tr>
  <thead>

    <tbody>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.CheckBox("misha", new { onclick = "this.form.submit();" })
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.firstName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.lastName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.email)
            </td>
        </tr>
    }
   <tbody>
</table>

<script type="text/javascript">
 $(document).ready(function(){
        $('#mydatatable').dataTable();
    });
</script>

最后但并非最不要忘记在您的网页上添加所需jquery文件的引用。

Answer 2

 //cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css
//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js

/////////////////////////////////////

<table id="myTable">
            <tr>
                <th>
                    @Html.DisplayText("First Name")
                </th>
                <th>
                    @Html.DisplayText("First Name")
                </th>
                <th>
                    @Html.DisplayText("Email")
                </th>
                <th>
                </th>
            </tr>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.CheckBox("misha", new { onclick = "this.form.submit();" })
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.firstName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.lastName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.email)
                    </td>
                </tr>
            }
        </table> 

    <script type="text/javascript">
     $(document).ready(function(){
            $('#myTable').dataTable();
        });
    </script>

在HTML表中创建分页

2 个答案: