Maison php教程 PHP开发 Résumé des problèmes de pagination des tables Bootstrap

Résumé des problèmes de pagination des tables Bootstrap

Jan 04, 2017 am 11:47 AM

Tout d'abord, merci beaucoup à l'auteur d'avoir réglé en détail les problèmes de pagination de la table bootstrap et de l'avoir partagé avec tout le monde. J'espère que cet article pourra vous aider à résoudre divers problèmes de pagination de la table Bootstrap. .

Problème 1 : Le serveur ne peut pas obtenir la valeur du formulaire. Il n'y a pas de problème avec la chaîne de requête, mais request.form ne peut pas obtenir la valeur

Solution : Il s'agit d'un problème ajax. utilise ajax natif. 1 peut être résolu en lisant les fichiers de flux. 2 Si vous souhaitez utiliser la méthode request.form, définissez contentType : "application/x-www-form-urlencoded",

tel que

$('#tableList').bootstrapTable({
method: 'post',
url: "",
height: $(window).height() - 200,
striped: true,
dataType: "json",
pagination: true,
"queryParamsType": "limit",
singleSelect: false,
contentType: "application/x-www-form-urlencoded",
Copier après la connexion

Question 2 : Définissez les paramètres transmis au serveur

Méthode :

function queryParams(params) {
 
return {
pageSize: params.limit,
 
pageNumber: params.pageNumber,
 
UserName: 4
 
};
 
}
 
 $('#tableList').bootstrapTable({
method: 'post',
url: "",
height: $(window).height() - 200,
striped: true,
dataType: "json",
pagination: true, 
 
queryParams: queryParams,
Copier après la connexion

Problème 3 : Les informations pageSize ne peuvent pas être obtenues en arrière-plan

Solution :

1.

<🎜 dans queryParams > 2. Modifiez le fichier source dans le fichier bootstrap-table.minjs en "limit"===this.options.queryParamsType&&(e={limit:e.pageSize,pageNumber:e.pageNumber,

Modifier bootstrap- table.js peut également être configuré dans

if (this.options.queryParamsType === &#39;limit&#39;) {
params = {
search: params.searchText,
sort: params.sortName,
order: params.sortOrder
};
if (this.options.pagination) {
params.limit = this.options.pageSize;
 
params.pageNumber=this.options.pageNumber,
params.offset = this.options.pageSize * (this.options.pageNumber - 1);
}
}
Copier après la connexion
pour ajouter "queryParamsType": "limit",

Complet :

&lt;script type=&quot;text/javascript&quot;&gt;
 
 
 
 
$(document).ready(function() {
 $(&#39;#tableList&#39;).bootstrapTable({
method: &#39;post&#39;,
url: &quot;getcompapylist&quot;,
height: $(window).height() - 200,
striped: true,
dataType: &quot;json&quot;,
pagination: true,
&quot;queryParamsType&quot;: &quot;limit&quot;,
singleSelect: false,
contentType: &quot;application/x-www-form-urlencoded&quot;,
pageSize: 10,
pageNumber:1,
search: false, //不显示 搜索框
showColumns: false, //不显示下拉框(选择显示的列)
sidePagination: &quot;server&quot;, //服务端请求
queryParams: queryParams,
//minimunCountColumns: 2,
responseHandler: responseHandler,
columns: [
{
field: &#39;CompanyId&#39;,
 
checkbox: true
 
},
{
field: &#39;qq&#39;,
 
title: &#39;qq&#39;,
 
width: 100,
 
align: &#39;center&#39;,
 
valign: &#39;middle&#39;,
 
sortable: false
 
}
,
{
field: &#39;companyName&#39;,
 
title: &#39;姓名&#39;,
 
width: 100,
 
align: &#39;center&#39;,
 
valign: &#39;middle&#39;,
 
sortable: false
 
}
]
});
 
});
function responseHandler(res) {
 
 
if (res.IsOk) {
var result = b64.decode(res.ResultValue);
 
var resultStr = $.parseJSON(result);
return {
&quot;rows&quot;: resultStr.Items,
&quot;total&quot;: resultStr.TotalItems
};
 
} else {
return {
&quot;rows&quot;: [],
&quot;total&quot;: 0
};
}
 
}
 
//传递的参数
 
function queryParams(params) {
 
return {
pageSize: params.limit,
 
pageNumber: params.pageNumber,
 
UserName: 4
 
};
 
}
&lt;/script&gt;
Copier après la connexion
Question 4 : Après la pagination, recherchez à nouveau Problème

Prémisse : Fonction de recherche et de pagination personnalisée, telle que la fonction de recherche de noms de produits.

Phénomène : Lors de la recherche de poupées gonflables, 100 les enregistrements sont renvoyés et la cinquième page est tournée. Lorsque j'ai recherché des bâtons de massage, il y avait 200 éléments de données. Les résultats devraient être les enregistrements sur la première page, mais les résultats sur la cinquième page étaient en fait affichés. après une recherche, le numéro de page n'a pas changé

Solution : option de réinitialisation

function search(){
 
 $(&#39;#tableList&#39;).bootstrapTable({pageNumber:1,pageSize:10});
 
}
Copier après la connexion
Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. .

Pour plus d'articles sur les problèmes de pagination des tables Bootstrap, veuillez faire attention au site Web PHP chinois


Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)