Le dernier projet ASP.NETMVC nécessite la classification des listes de données. Ceci est à l'origine un backend développé basé sur Bootstrap, donc je me demande si Bootstrap a un plug-in de pagination ou une fonction de pagination prise en charge par jQuery, afin que le style de backend global puisse être unifié sans avoir à écrire un ensemble de fonctions de pagination par vous-même.
La première chose est de télécharger Bootstrap Paginator. Adresse de téléchargement: Plugin Paginator Paginator Bootstrap
Tout d'abord, les fichiers JS et CSS doivent être introduits au-dessus de la vue. Il y a trois fichiers principaux, à savoir les fichiers JS du CSS, JQuery et Paginator. J'ai cherché en ligne et il semble que jQuery doit être la version 1.8 ou supérieure, je n'ai jamais testé cela en personne. Ainsi, la référence du fichier de la vue est:
<link href = "css / bootstrap.css" rel = "stylesheet"> <script type = "text / javascript" src = "js / jQuery-1.8.1.js"> </ script> <script type = "text / javascrip
Ensuite, la fonction de pagination est bien sûr un rafraîchissement local basé sur l'Ajax pour nous attirer, et bien sûr, cela nécessite le soutien de jQuery. J'avais l'habitude de faire une pagination Easyui, et cette fois, ce devrait être un peu différent.
<script> $ (function () {var carid = 1; $ .ajax ({url: "/ oa / setting / getdate", dataType: 'json', type: "post", data: "id =" + carid, succès: function (data) {if (data! = null) {$ .each (eval ("+ data +") "). $ ("Liste"). $ (# liste "). $ (# liste "). $ (# liste "). ); "> Delete </futton> '); $ (" # list "). Append (' </td> '); $ (" # list "). APPEND (' </tr> '); $ (" # list "). Append (' </tbody> '); $ (" # list "). $ (# liste "). Type) var currentPage = eval ("(" + data + ")"). CurrentPage; "Page précédente"; Cas "Suivant": Return "Page Suivant"; "page =" + page, succès: fonction (data1) {if (data1! = null) {$ .each (eval ("(" + data + ")"). list, function (index, item) {// Table $ ("# liste"). $ (# liste "). $ (# liste "). $ ("# liste"). $ ("# list"). $ (# list ").Dans la partie principale de la vue, il y a deux divs, l'un pour présenter la liste de données et l'autre pour placer la navigation de la page de sélection.
<div> <Belle> Liste du département </ label> <hr /> <div id = "list"> </ div> <div id = "example"> </div> </div>
La méthode GetDate en arrière-plan est comme ceci:
public actionResult getDate (int id, int? page) {int pageIndex = page ?? 1; // La page actuelle const int pagesize = 2; // Ceci est utilisé pour définir le nombre de données à afficher sur chaque page. Il est recommandé d'écrire ceci sur web.config pour Global Control // amener les données du département à afficher iEnumerable <Model.QGOA_DEPARTMENT> List = OperateContext.current.bllSession.iqgoa_dePartmentBll.GetPagedList (PageIndex, PageSize, x => x.id! = Null, x => x.id); // Obtenez le nombre de données int rowCount = list.Count (); // par calcul, il est nécessaire de diviser la page en plusieurs pages. Les données inférieures à une page sont calculées en fonction d'une page if (RowCount% pagesize! = 0) {RowCount = RowCount / PageSize + 1; } else {RowCount = RowCount / PageSize; } // Converti au format JSON var strresult = "{/" pageCount / ":" + rowCount + ", /" currentPage / ":" + pageIndex + ", /" list / ":" + jsonconvert.serializeObject (list) + "}"; Retour JSON (strresult, jsonrequestbehavior.allowget); }Cette méthode est encore un peu imparfaite et peut être écrite plus parfaitement, tout comme la pages de pages ci-dessus peut être modifiée globalement en lisant le fichier de configuration web.config, qui est pratique à gérer. De plus, pour des informations telles que les attributs de page: numéro de page, page actuelle, quantité de données, etc., vous pouvez faire un cours pour stocker des informations. Si le projet du site Web est plus important, il nous conviendra plus de modifier notre propre code.
L'effet d'affichage final est le suivant:
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est l'utilisation du plug-in Paginator Bootstrap Paginator que j'ai partagé avec vous. J'espère qu'il vous sera utile de maîtriser l'utilisation du plug-in Paginator Bootstrap Paginator.