Adding pagination to an ASP.NET MVC Razor view

Question

I have an ASP.NET MVC 4 web application 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. How can I add pagination between pages at the same view?

Can I use Ajax to do that?

Answer 1

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