将分页添加到剃刀视图答案

【问题标题】：Adding the pagination to a razor view将分页添加到剃刀视图
【发布时间】：2013-09-28 12:47:34
【问题描述】：

我有一个 asp.Net Mvc4 网络应用程序，其中我有一个列表作为模型：

<table class="table_data" border="1">
            <tr>
                @if(Model.Count > 0){
                <th>
                    @Html.Label("Fonction")
                </th>
                <th>
                    @Html.Label("Nom du client")
                </th>
                <th>
                    @Html.Label("Date de réception")
                </th>
                <th>
                    @Html.Label("Date de clôture")
                </th>
                    <th></th>
                }
            </tr>
            @foreach(Planning.Models.Paire p in Model){
                <tr>
                <td>
                        <label>@p._tag</label>
                </td>
                <td>
                    <label>@p._client</label>
                </td>
                <td>
                   <label>@p._reception</label>
                </td>
                <td>
                   <label>@p._cloture</label>

               </td>  
                    <td>
                        @{
                                List<Planning.Models.Impaire> liste = u.Get_Impaire_List();
                             Planning.Models.Impaire imp = liste.Find(x => x.id_paire == p.Id);

                            if (imp != null){
                   @Html.ActionLink("voir plus de détails", "Details", new { id_paire = p.Id })}
                        }
               </td>  
            </tr> 
            }
        </table>

Model 是 List<Paire> 。

我想在同一个视图中同时显示每 15 行，那么如何在同一个视图中添加页面之间的分页？我可以使用Ajax 来做到这一点吗？

【问题讨论】：

asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/…
您当然可以使用 AJAX 从服务器获取分页数据。尽管如果您没有解决任何性能问题而只是想要分页，那么没有理由将一个服务器调用变成多个。 DataTables (datatables.net) 之类的工具将通过一行代码为您的表添加分页/排序/过滤。

标签： c# asp.net ajax asp.net-mvc-4 razor

【解决方案1】：

尝试以下操作：

$('table.table_data').each(function () {
        var currentPage = 0;
        var numPerPage = 15;
        var $table = $(this);
        $table.bind('repaginate', function () {
            $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
        });
        $table.trigger('repaginate');
        var numRows = $table.find('tbody tr').length;
        var numPages = Math.ceil(numRows / numPerPage);
        var $pager = $('<div class="pager"></div>');
        for (var page = 0; page < numPages; page++) {
            $('<span class="page-number"></span>').text(page + 1).bind('click', {
                newPage: page
            }, function (event) {
                currentPage = event.data['newPage'];
                $table.trigger('repaginate');
                $(this).addClass('active').siblings().removeClass('active');
            }).appendTo($pager).addClass('clickable');
        }

            $pager.insertAfter($table).find('span.page-number:first').addClass('active');


    });

你需要添加<tbody>标签，来分割正文行和头行：

<table class="table_data" border="1">
            <tr>
                @if(Model.Count > 0){
                <th>
                    @Html.Label("Fonction")
                </th>
                <th>
                    @Html.Label("Nom du client")
                </th>
                <th>
                    @Html.Label("Date de réception")
                </th>
                <th>
                    @Html.Label("Date de clôture")
                </th>
                    <th></th>
                }
            </tr>
            <tbody>
            @foreach(Planning.Models.Paire p in Model){
                <tr>
                <td>
                        <label>@p._tag</label>
                </td>
                <td>
                    <label>@p._client</label>
                </td>
                <td>
                   <label>@p._reception</label>
                </td>
                <td>
                   <label>@p._cloture</label>

               </td>  
                    <td>
                </tr>
             </tbody>

并为pager添加css：

div.pager {
    text-align: center;
    margin: 1em 0;
}

div.pager span {
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8;
    text-align: center;
    cursor: pointer;
    background: #216aaf;
    color: #fff;
    margin-right: 0.5em;
}

div.pager span.active {
    background: #e6f1fb;
    color:#216aaf;
}

【讨论】：

对不起，我仍然不明白我如何才能移到下一页，通过哪个事件？我必须在下一个和上一个按钮上添加一个按钮吗？
@Lamloumi 不，此代码自动添加带有页码的按钮并向该按钮添加点击事件。不要忘记添加我写的css。
非常感谢。它运行良好，性能也非常好。
@AndriyGubal from model 我正在按 desc 顺序排列数据，但是通过使用您的代码分页可以工作，但它没有按 desc 顺序排列。请帮我解决这个问题

【解决方案2】：

试试这个最简单的方法之一

控制器

using PagedList;
public ActionResult Index(int ? pagePos)
{
        //return View(db.Items.ToList());// Change this as following
        int pageNumber = (pagePos ?? 1);
        return View(db.Items.ToList().ToPagedList(pageNumber, 30));
        //30 equels number of items per page
}

索引.cshtml

@*@model IEnumerable<ProjectDB.Models.Item>*@
@*Change These Also as following*@
@model PagedList.IPagedList<ProjectDB.Models.Item>
@using PagedList.Mvc


<table class="table">
<tr>
    <th>
        Name
    </th>
    <th>
        Code
    </th>

    <th></th>
</tr>

@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.Name)
    </td>
    <td>
        @Html.DisplayFor(modelItem => item.Code)
    </td>

    <td>
        @Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
        @Html.ActionLink("Details", "Details", new { id=item.Id }) |
        @Html.ActionLink("Delete", "Delete", new { id=item.Id })
    </td>
</tr>
}   
</table>

@*Pagination Code Starts*@

<div class="pageCount">
    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
</div>
    @Html.PagedListPager(Model, pagePos => Url.Action("Index", new { pagePos }))

【讨论】：