Résumé des problèmes de pagination des tables Bootstrap-PHP开发-php.cn

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

高洛峰

Libérer： 2017-01-04 11:47:03

original

1591 Les gens l'ont consulté

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

$(&#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éfinissez 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 :

<🎜 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 :

<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

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