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

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

WBOY

Libérer： 2016-05-16 15:04:41

original

1332 Les gens l'ont consulté

Cet article partage les problèmes 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 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",

comme

 $('#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éfinir 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 est défini 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,

Vous pouvez également modifier bootstrap-table.js

if (this.options.queryParamsType === 'limit') {
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 ajoutée "queryParamsType": "limite",

Complet

<script type="text/javascript">




$(document).ready(function() {
 $('#tableList').bootstrapTable({
method: 'post',
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: 'CompanyId',

checkbox: true

},
{
field: 'qq',

title: 'qq',

width: 100,

align: 'center',

valign: 'middle',

sortable: false

}
,
{
field: 'companyName',

title: '姓名',

width: 100,

align: 'center',

valign: 'middle',

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. Rechercher à nouveau après la pagination

Condition préalable : 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. Lors de la recherche de bâtons de massage, il y a 200 enregistrements, le résultat devrait être les enregistrements sur la première page, mais l'affichage réel est toujours. sur la cinquième page. Le résultat. Autrement dit, après recherche, le numéro de page n'a pas changé

Solution : réinitialisez simplement l'option.

 function search(){

 $('#tableList').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 qu’il sera utile à l’étude de chacun.