wie Client-Seiten-Paging mit jqPagination oder twbs-Paginierung in asp.net mvc

Question

implementieren Ich muss Client-Seiten-Paging mit jquery-Plugin wie twbsPagination oder jqPagination implementieren.aber es funktioniert nicht richtig und zeigt mir die ganze Liste, Wie kann ich die richtige Anzahl von Zeilen anzeigen, Danke für Ihre Hilfe.

Modell:

public class Restaurant 
    { 
     public int Id { get; set; } 
     public string Name { get; set; } 
     public string City { get; set; } 
     public string Country { get; set; } 
    } 

Aktion:

public ActionResult ClientSidePaging(string name = null) 
     { 
      var model = CreateModel(name); 
      return View(model); 
     } 

Ausblick:

@foreach (var item in Model) 
{ 
    <div id="page-content"> 
     <h4>@item.Name</h4> 
     <div> 
      @item.City, @item.Country 
     </div> 
     <hr/> 
    </div> 
} 
    <div id="pagination-demo" class="pagination-sm"></div> 

@section scripts { 
    <script type="text/javascript"> 

     $(document).ready(function() { 

      $('#pagination-demo').twbsPagination({ 
       totalPages: 101, 
       visiblePages: 10, 
       onPageClick: function(event, page) { 
        $('#page-content').text('Page ' + page); 
       } 
      }); 

     }); 
    </script> 
} 

Answer 1

es scheint, dass Sie versuchen zu zeigen, tabl Die Daten mit Blättern auf der Seite laden. Ich habe es getan, ohne jquery plugins zu verwenden. Geben Sie einfach Ihre Tabelle class = "paginated" und fügen Sie den folgenden Code in Ihrer Ansicht hinzu.

<script src="~/Scripts/jquery-1.10.2.js"></script> 
 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
    $('table.paginated').each(function() { 
 
          var currentPage = 0; 
 
          var numPerPage = 10; 
 
          $('.pager').empty(); 
 
          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'); 
 
         }); 
 
    }); 
 
</script>

<style> 
 
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: #000; 
 
    color: #fff; 
 
    margin-right: 0.5em; 
 
} 
 

 
div.pager span.active { 
 
    background: #c00; 
 
} 
 

 
</style>