Bootstrap Paginator Paging Plugin Download Adresse:
Télécharger le projet dans GitHub
1. Il s'agit de la fonction JS qui doit être placée sur la page qui doit être paginée:
<span style = "font-size: 14px;"> function paging (page) {$ .ajax ({type: "get", url: "$ {ctx} / api / v1 / user / 1 /" + (page-1) + "/ 5", dataType: "json", succès: function (msg) {...... // Omit (query out data)}}); $ .ajax ({type: "get", URL: "$ {ctx} / api / v1 / user / count / 1", type de données: "json", succès: fonction (msg) {var pages = math.ceil (msg.data/5); // le montant total des données dans les données ici var element = $ ('# # page'); BootstrapMaJorVersion: 3, CurrentPage: Page, // La page actuelle Numéro de pages: 5, // Les plusieurs boutons sont affichés sur une page (5 lis sont générés dans UL) TotalPages: Pages // Nombre total de pages} élément.bootstrappaginator (Options); } </span>page:
<span style = "font-size: 14px;"> <ul id = "pageul"> </ul> </span>
* Il est automatiquement généré dans Li
2. La chose la plus importante et la plus essentielle est de modifier le fichier source de bootstrap-paginator.js vous-même , comme suit:
<span style = "font-size: 14px;"> onPageClicked: fonction (événement, originalevent, type, page) {// Affichez la page correspondante et récupérez l'élément nouvellement construit lié à la page cliquée avant l'événement return var currentTarget = $ (event.currentTarget); switch (type) {case "First": currentTarget.bootstrAPaginator ("showFirst"); Paging (page); casser; // Case de page précédente "PREV": CurrentTarget.bootStrapappaginator ("showPrevious"); Paging (page); casser; case "Next": currentTarget.bootstrappaginator ("showExt"); Paging (page); casser; Case "Last": currentTarget.bootstrappaginator ("showlast"); Paging (page); casser; case "page": currentTarget.bootstrappaginator ("show", page); Paging (page); casser; }}, </pan>* Appelez la méthode de la page (page) après le style de page que vous avez cliqué. Les paramètres du fichier source de page ici sont déjà disponibles, alors passez-les directement!
Effet: lorsque le style est modifié, utilisez directement la valeur de la page du contrôle pour envoyer une demande Ajax! Enfin, la pagination sans rafraîchissement est mise en œuvre.
Ce qui précède est les connaissances pertinentes introduites par l'éditeur pour combiner le plug-in de pagination du paginateur bootstrap avec AJAX pour obtenir un effet de pagination sans rafraîchissement dynamique. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!