Bootstrap Table est un plug-in de table léger qui utilise AJAX pour obtenir des données au format JSON. Sa pagination et son remplissage des données sont très pratiques et soutient l'internationalisation. Récemment, l'arrière-plan a utilisé ce plug-in pour créer une application de table pour résumer.
1. Comment utiliser
Vous pouvez obtenir des plug-ins JS, des feuilles de style et des plug-ins internationaux via le CDN fourni par YouPaiyun, ou les télécharger directement sur le site officiel. Mettez le plug-in et les styles JS suivants dans l'en-tête HTML et utilisez-le.
// style <link href = "http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.css" rel = "Stylesheet" /> <script src = "http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"> </cript> // Internationalisation, table chinoise <script src = "http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-cn.min.js"> </ script>
2. remplissage de données table
Il existe deux façons d'obtenir des données de la table bootstrap. L'une consiste à spécifier la source de données via la propriété Data-URL de la table, mais pour spécifier l'URL lors de l'initialisation du tableau par JavaScript pour obtenir des données, comme indiqué dans l'exemple suivant.
<table data-toggle = "table" data-url = "data.json"> <dead> ... </pead> </ table> $ ('# table'). bootstraptable ({url: 'data.json'});La deuxième méthode pour remettre la première méthode est plus flexible lors du traitement des données complexes. Généralement, la deuxième méthode est utilisée pour remplir les données de la table.
var $ table = $ ('# table'); $ table.bootstraptable ({url: "duobaoactivityList", dataType: "json", pagination: true, // pagination singleSelect: false, data-locale: "zh-us", // table chinois search: true, // show search box sidepagination: "server", // server-sa-sdeat pagination pagination colination: [Titrepagination: "Server", // Server-sate-side pagination colination: [Titre-Titrepagination: "Server", // Server-Side Traite Pagination Colination Colonines: [Titre-Titrepagination: "Server", // Server-SIDE TRAPRESSE PAGINA name',field: 'name',align: 'center',valign: 'middle'}, {title: 'status',align: 'center',valign: 'middle',}, {title: 'number of participants',field: 'participationCounts',align: 'center'},{title: 'total number of participants',field: 'totalCounts',align: 'center'},{title: 'starttime', align: 'Center',}, {title: 'opération', champ: 'id', align: 'Center', formatter: function (valeur, ligne, index) {var e = '<a href = "#" mce_href = "#" onclick = "edit (/' '+ row.id +' / ')"> edit </a>'; mce_href = "#" onclick = "del (/ '' + row.id + '/')"> delete </a> ';Le champ de champ doit correspondre au champ renvoyé par le serveur avant que les données ne soient affichées.
3. Pagination et recherche
Lors de la pagination, la table bootstrap passe deux champs de pagination au backend: limite et décalage. Le premier représente le nombre de chaque page, par défaut, et le second représente le décalage des données pendant la pagination.
Lors de la recherche, le champ de recherche est transmis au backend, indiquant le contenu de recherche spécifique.
Les données renvoyées par le côté serveur doivent également inclure deux champs: page (nombre de pages) et total (données totales), et le frontal doit paginer en fonction de ces deux champs.
L'effet d'affichage final est illustré dans la figure ci-dessous:
Ce qui précède est le résumé de l'application de remplissage et de pagination des données de mise en œuvre du tableau dans Bootstrap qui vous est présenté 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!