Tout d'abord, regardez les rendus de mise en œuvre. Si vous pensez que ce n'est pas mal, veuillez vous référer au code d'implémentation.
Les données ci-dessus sont paginées ci-dessous
Comment utiliser
1 Importer le CSS de Bootstrap
<link rel = "Stylesheet" href = "css / v3 / bootstrap.min.css">
2 Importer jQuery
<script src = "js / jquery-1.10.1.min.js" type = "text / javascript"> </ script>
3 Importer Table Table Paging Plugin lTable.js
<script src = "js / lTable.js" type = "text / javascript"> </ script>
4 Ajouter une balise HTML et attribuer des valeurs à ID
<! - Table -> <div id = "d"> </div> <! - Pagination -> <div id = "u"> </div>
5 Obtenez des données
Ici, obtenez les données simulées du fichier JSON via AJAX
Initiable (données) est la méthode d'initialisation des tables et de la pagination
$ .ajax ({url: "json / data.json", type: "get", dataType: "json", succès: function (data) {initTable (data);}, error: function (e) {alert ("Data Acquisition Error");}});6 Initialisez la table
Initialiser le tableau d'abord dans la méthode d'initialisation
var obj = data; var myTable = $. lTable ('#d', {data: obj.list // json data, title: ["userrid", "username", "mot de passe", "userroleName", "status", "button onclick = 'updf (id)'> Modify </ button> <button onclick = 'idf (id)'> delete Nom: ["UserId", "Username", "Mot de passe", "Nom d'autorisation", "Status", "_ Opt"], Tid: "UserId", Checkbox: "UserId"});Description du code
6.1 Méthode d'initialisation
$ .lTable ('id', {data, titre, nom, tid, tchchox});
6.2 Description de l'attribut
ID: le bloc de remplissage sélectionné par la page
Données: Données JSON affichées sur la page
Titre: champ correspondant aux données pour chaque colonne de la table
Nom: La première ligne de la table affiche le champ
TID: la valeur clé correspondante de chaque ligne (peut être omise)
BOIDE: Valeur correspondant à la case à cocher (peut être omise)
6.3 Description de la case à cocher
Activer lors de l'ajout d'attribut tchchox init
Cocher la case Nom = "IDS"
Obtenez la méthode de la colonne sélectionnée: $ .ltable.getCheckBoxids () Retour Valeur Exemple "1,2,3,4"
6.4 Instructions de fonctionnement
Lorsque le nom d'attribut = _OPT, l'en-tête de la table modifie automatiquement la position "opération"
Le titre d'attribut correspondant peut ajouter des boutons et d'autres opérations
Exemple: "<Button onClick = 'updf (id)'> Modifier </futton>"
La méthode de clic est updf (). L'ID de paramètre est le champ correspondant de l'attribut TID.
7 Initialiser la pagination
Puis la partie de pagination
dollars. dataUrl);}});
Description du code
7.1 Méthode d'initialisation
$ .lpaging ('id', {pageNumber, totalPage, comptyze, count, onPageChange (num), inputSearch});
7.2 Description de la méthode d'attribut
ID: le bloc de remplissage sélectionné par la page
Pagenumber: numéro de page actuel
PAGE TOTAL: Nombre de pages totales
Comptedsize: le nombre de pages s'affiche (la valeur par défaut peut être omise)
Compte: nombre total de données
OnPageChange (NUM): Renvoie l'événement Click
InputSearch: s'il faut afficher la boîte d'entrée de requête booléenne par défaut false
getInputVal (): renvoie le numéro dans la zone d'entrée
8 L'ensemble du code
<! Doctype html> <html> <ead> <meta charset = "utf -"> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge"> <ititle> </ title> <link rel = "Stylesheet" href = "css / v / bootsstrap.Min.css"> </ wread> <! - <! - <! - Tableau> <! id = "d"> </ div> <! - Pagination -> <div id = "u"> </ div> </ body> <script src = "js / jQuery -... min.js" type = "text / javascrip dataUrl = ""; // initialiser la page initpage (, pagesize, ""); // ajax obtient la fonction de données initpage (num, ps, url) {$. ajax ({url: "json / data.json", type: "get", // type: "post", // data: "userInfovo.pageid =" + num + "& userInfovo.pageCount =" + ps, datatype: "json", userInfovo. Success: Function (data) {initable (data);}, error: function (e) {console.log (e) alert ("Erreur d'acquisition de données");}});} // initialiser la table et les données de pagination Fonction initable (data) {// var obj = evaled ("(" + data + ")"); obj = data; // tableMyTable = $. lTable ('# d', {data: obj.list // json data, title: ["userId", "username", "mot de passe", "userrolename", "status", "<bouton onclick = 'updf (id)'> modifier </ bouton> <bouton onclick = ' Nom: ["UserId", "Username", "Mot de passe", "Nom d'autorisation", "Status", "_ Opt"], Tid: "UserId", Checkbox: "UserId"}); // mytable.getCheckBoxids (); // Obtenez la valeur sélectionnée par cocherbox // page $ .lpaging ('# u', // id composant {pageNumber: obj.pagenumber // numéro de page actuel, totalpage: obj.totalpage // numéro de page total, compter: // le nombre de pages affiche (peut être omis), compter: obj.count, entrée: {initpage (num, pagesize, dataUrl);}});} // modifier la fonction de méthode updf (id) {alert ("modifier:" + id);} // delete method function delf (id) {alert ("Delete:" + id);} </cript> </html>Wulin.com recommande des sujets liés à Bootstrap:
Compétences de fonctionnement des composants bootstrap
Résumé des connaissances liées à la bootstrap
Ce qui précède est l'explication détaillée du plug-in de forme bootstrap3 et des exemples de plug-in de pagination introduits par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!