Добавление пагинации на вид бритвы

Question

У меня есть веб applcation 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 для этого?

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

И добавить 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; 
} 

Answer 2

Try Это Один из самых простых методов

Контроллер

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