将分页添加到剃刀视图

Question

I have an asp.Net Mvc4 web applcation in which i have a list as a model:

<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>

The Model is List<Paire> .

I'd like to display each 15 lines together in the same view, so how can i add the pagination between pages at the same view? Can i use Ajax to do that?

Answer 1

Try following:

$('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');


    });

You need to add <tbody> tag, to split body's rows and head row:

<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>

And add css for pager:

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;
}

Answer 2

Try This One of the easiest method

Controller

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
}

Index.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 }))