Résoudre les problèmes rencontrés lors de la mise en œuvre de la pagination de la table d'amorçage du composant JS-js tutoriel-php.cn

Résoudre les problèmes rencontrés lors de la mise en œuvre de la pagination de la table d'amorçage du composant JS

高洛峰

Libérer： 2017-01-04 11:55:31

original

1724 Les gens l'ont consulté

Cet article partage le problème de pagination de la table d'amorçage pour votre référence. Le contenu spécifique est le suivant

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 avec la requête. .form ne peut pas être obtenu. 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",

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 :

1 Set

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 et vous pouvez également

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

configuration pour ajouter "queryParamsType": "limit",

Complete

<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, problème de recherche

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 pour les poupées gonflables, 100 enregistrements sont renvoyés et en défilant jusqu'à la cinquième page, lors de la recherche de bâtons de massage, il y a 200 données. Le résultat devrait être l'enregistrement sur la première page, mais les résultats sur la cinquième page le sont. effectivement affiché. 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

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que cela sera utile à l'apprentissage de tout le monde.

Plus de solutions aux problèmes rencontrés lors de la mise en œuvre de la pagination de la table d'amorçage du composant JS. Veuillez faire attention au site Web PHP chinois

pour les articles connexes !