Tout d'abord, je tiens à remercier l'auteur d'avoir réglé les questions détaillées sur la pagination de la table bootstrap et de les partager avec vous. J'espère que cet article peut vous aider à résoudre divers problèmes dans la pagination de la table bootstrap. Merci pour votre lecture.
Question 1: Le serveur ne peut pas obtenir la valeur du formulaire, il n'y a aucun problème avec la question, mais la demande ne peut pas obtenir la valeur
Solution: Il s'agit d'un problème avec AJAX, le code d'origine utilise Ajax natif. 1 peut être résolu en lisant des fichiers de flux. 2 Si vous souhaitez utiliser la méthode Request.
comme
$ ('# tablelist'). bootstraptable ({méthode: 'post', URL: "", hauteur: $ (fenêtre) .Height () - 200, rayé: true, type de données: "JSON", pagination: true: "QueryParamsty"Question 2: Définissez les paramètres transmis sur le serveur
méthode:
Fonction QueryParams (params) {return {pagesize: params.limit, pagenumber: params.pagenumber, nom d'utilisateur: 4};} $ ('# tablelist'). Bootstraptable ({méthode: 'post', url: "", "json", pagination: true: trip: true: datatype: "json", pagination: true, queryParams: datatype: "json", pagination: true, queryparams: true: " queryparams,Question 3: Les informations sur pages ne peuvent pas être récupérées en arrière-plan
résoudre:
1. Réglez-le dans QueryParams
2. Dans le fichier bootstrap-table.minjs, modifiez le fichier source en "limiter" === this.options.QueryParamStype && (e = {limit: e.pagesize, pageNumber: e.pageNumber,
Modification de bootstrap-pable.js est également OK
if (this.options.QueryParAmSype === 'LIMIT') {params = {search: params.searchText, tri: params.sortname, ordre: params.sortOrder}; if (this.options.pagination) {params.limit = this.options.pagesSize; params.pageNudge * (this.options.pageNumber - 1);}}Configurer "QueryParamstype": "limite",
entier:
<script type = "text / javascript"> $ (document) .ready (function () {$ ('# tablelist'). bootstraptable ({méthode: 'post', url: "getCompAppylist", height: $ (window) .height () - 200, rayé: true, datatype: "json", pagein False, contentType: "Application / x-www-form-urlencoded", PageSize: 10, PageNumber: 1, Search: False, // N'affiche pas la case de recherche ShowColuns: False, // n'affiche pas la case déroulante (Sélectionnez la colonne affichée) Sidepagination: "Server", // Request de requier: queryparams, // minimumd ResponseHandler, Colonnes: [{Field: 'CompanyId', Checkbox: True}, {Field: 'QQ', Title: 'QQ', Width: 100, Align: 'Center', Valign: 'Middle', Sorable: False}, {Field ',' COMPANYNAM ResponseHandler (res) {if (res.isok) {var result = b64.decode (res.resultValue); var resultstr = $ .parsejson (res); return {"Rows": resultstr.items, "Total": resultstr.totalitems};} else {return {"Rows": [], "total": 0};} queryParams (params) {return {pagesize: params.limit, pageNumber: params.pageNumber, nom d'utilisateur: 4};} </cript>Question 4: Re-recherche après la pagination
Préalable: fonctions de recherche et de pagination personnalisées, telles que la fonction de la recherche de noms de produits.
Phénomène: Lors de la recherche de poupées gonflables, retournez 100 enregistrements et tournez-vous à la page 5. À l'heure actuelle, recherchez des bâtons de massage, il y a 200 données et le résultat devrait être l'enregistrement sur la première page, mais l'affichage réel est le résultat sur la cinquième page. Autrement dit, après la recherche, le Pagenumber n'a pas changé.
Solution: réinitialisez simplement l'option.
Fonction Search () {$ ('# Tablelist'). Bootstraptable ({PageNumber: 1, PageSize: 10});}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 de la table bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.