Lamloumi Afif Lamloumi Afif - 5 months ago 45
Ajax Question

Adding the pagination to a razor view

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

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