Résumé des problèmes de pagination des tables Bootstrap [avec réponses et code]-Tutoriel d'amorçage-php.cn

Résumé des problèmes de pagination des tables Bootstrap [avec réponses et code]

angryTom

Libérer： 2020-05-15 09:17:38

original

2952 Les gens l'ont consulté

Résumé des problèmes de pagination des tables Bootstrap [avec réponses et code]

Cet article résume plusieurs problèmes que vous pouvez rencontrer lors de l'utilisation de la table bootstrap pour implémenter la pagination. J'espère qu'il vous sera utile.

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. Le code d'origine utilise l'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",

$(&#39;#tableList&#39;).bootstrapTable({
method: &#39;post&#39;,
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éfinir les paramètres transmis au serveur

Méthode :

function queryParams(params) {
return {
pageSize: params.limit,
pageNumber: params.pageNumber,
UserName: 4
};
}
 $(&#39;#tableList&#39;).bootstrapTable({
method: &#39;post&#39;,
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 Set 2. Modifiez le fichier source dans le fichier bootstrap-table.minjs en "limit"===this.options.queryParamsType&&(e={limit:e.pageSize, pageNumber:e.pageNumber,

Modifiez bootstrap-table.js ou vous pouvez

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

3. Ajoutez la configuration "queryParamsType": "limit",

Complétez :

<script type="text/javascript">
$(document).ready(function() {
 $(&#39;#tableList&#39;).bootstrapTable({
method: &#39;post&#39;,
url: "getcompapylist",
height: $(window).height() - 200,
striped: true,
dataType: "json",
pagination: true,
"queryParamsType": "limit",
singleSelect: false,
contentType: "application/x-www-form-urlencoded",
pageSize: 10,
pageNumber:1,
search: false, //不显示 搜索框
showColumns: false, //不显示下拉框（选择显示的列）
sidePagination: "server", //服务端请求
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 {
"rows": resultStr.Items,
"total": resultStr.TotalItems
};
} else {
return {
"rows": [],
"total": 0
};
}
}
//传递的参数
function queryParams(params) {
return {
pageSize: params.limit,
pageNumber: params.pageNumber,
UserName: 4
};
}
</script>

Copier après la connexion

Problème 4 : Le problème de la recherche après la pagination

Prérequis : 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 enregistrements sont renvoyés et tournés vers la cinquième page. À ce moment, lors de la recherche de bâtons de massage, il y a 200 enregistrements. être les enregistrements sur la première page, mais l'affichage réel est toujours sur la cinquième page. Autrement dit, après une nouvelle recherche, le numéro de page n'a pas changé

Solution : . Réinitialisez simplement l'option.

 function search(){
     $(&#39;#tableList&#39;).bootstrapTable({pageNumber:1,pageSize:10});
}

Copier après la connexion

Si vous souhaitez en savoir plus, vous pouvez cliquer ici Étudions, et voici 3 sujets passionnants pour vous : 　

Tutoriel vidéo Bootstrap.

Tutoriel de démarrage de Bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!