Associate Boostrap Paginierung mit Tabellen

Question

Ich habe den folgenden Code verwendet, um Seitenumbruch in meiner Ansicht zu rendern. Es funktioniert gut. Aber ich konnte kein Dokument finden, um diese Seitennummerierung der entsprechenden Tabelle zuzuordnen. Im Moment werden alle Zeilen in meiner Tabelle geladen. Ich bin ziemlich sicher, irgendwo muss ich die Tabelle angeben, um die Seitennummerierung zuzuordnen. Irgendwelche Ideen?

var options = { 
     currentPage: 1, 
     totalPages: 1000, 
     bootstrapMajorVersion: 3, 

    } 

    $('#myPager').bootstrapPaginator(options); 

Ansicht

<ul class="pagination" id="myPager"> 
</ul> 

Answer 1

Die Bootstrap-Paginierung Komponente keine Logik hat clientseitige Paginierung aus der Box auszuführen, müssen Sie es auf eigene Faust schreiben.

Wenn Sie Bootstrap-paginator.js Sie eine Ajax-Anforderung wie auf diese Weise durchführen sollten:

var options = { 
     currentPage: 3, 
     totalPages: 10, 
     onPageClicked: function(e,originalEvent,type,page){ 
      $('#table').html(htmlData); 

      $.ajax({ 
       method: "POST", 
       url: "GetTableDataUrl", 
       data: { page: page } 
      }) 
      .done(function(htmlData) { 
       $('#table').html(htmlData); 
      }); 
     } 
    } 

$('#example').bootstrapPaginator(options); 

Ihre MVC Aktion sollte wie folgt aussieht:

[HttpPost] 
    public ActionResult GetTableDataUrl(int page) 
    { 
     // retrieve data for the wanted page 
     return PartialView(""); 
    } 

Ich schlage vor, Sie Verwenden Sie dieses Nuget-Paket: PagedList.Mvc Es enthält eine Reihe von HTML-Helfern, die pa ausführen können Die gewünschte Seitenzahl wird als Parameter an die Aktion übergeben und die Bootstrap-Komponente entsprechend gerendert.

Bitte nehmen Sie sich einen Blick auf die offiziellen Tutorial auf ASP.NET