Summary of Bootstrap table pagination problems [with answers & code]

This article summarizes several problems that may be encountered when using bootstrap table to implement paging. I hope it can be helpful to everyone.

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",

$('#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. In queryParams Set

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

You can also modify 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);
}
}

3. Add configuration "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: The problem of re-searching after paging

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

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

Solution: Just reset the option.

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

If you want to learn more, you can click here Let’s study, and here are 3 exciting topics for you:

　Bootstrap video tutorial

##　Bootstrap Getting Started Tutorial

The above is the detailed content of Summary of Bootstrap table pagination problems [with answers & code]. For more information, please follow other related articles on the PHP Chinese website!