Cet article partage le problème de la pagination de la table bootstrap pour votre référence. Le contenu spécifique est le suivant
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 la pages ne peuvent pas être récupérées en arrière-plan
résoudre:
1set dans QueryParams
2 Modifiez le fichier source dans le fichier bootstrap-table.minjs
"limit" === 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. Questions redéfinies 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 apprendre en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher deux sujets passionnants: Tutoriel d'apprentissage bootstrap Tutoriel Bootstrap
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.