Summary of Bootstrap table paging issues

First of all, I am very grateful to the author for organizing the bootstrap table paging problem in detail and sharing it with everyone. I hope that this article can help you solve various problems of Bootstrap table paging. Thank you for reading.

Problem 1: The server cannot get the form value. There is no problem with querystring, but request.form cannot get the value.

Solution: This is an ajax problem. The original code uses native ajax. 1 can be solved by reading stream files. 2 If you want to use the request.form method, set contentType: "application/x-www-form-urlencoded",

such as

$('#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",

Question 2: Set the parameters passed to the server

Method:

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,

Problem 3: The pageSize information cannot be obtained in the background

Solution:

1. Set it in queryParams

2. In Modify the source file of bootstrap-table.minjs file to "limit"===this.options.queryParamsType&&(e={limit:e.pageSize,pageNumber:e.pageNumber,

Modify bootstrap-table.js also You can

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);
}
}

configure and add "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>

Question 4: After paging, re-search question

Prerequisite : Customized search with paging function, such as the function of searching product names.

Phenomenon: When searching for inflatable dolls, 100 records are returned, and then turned to the fifth page. At this time, when searching for massage sticks, there are 200 data The results should be the records on the first page, but the results on the fifth page are actually displayed. That is, after re-searching, the pagenumber has not changed.

Solution: Just reset the option.

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

The above is the entire content of this article, I hope it will be helpful to everyone's learning

For more articles related to Bootstrap table paging issues, please pay attention to the PHP Chinese website! ##