Solve the problems encountered during the implementation of JS component bootstrap table paging-JS Tutorial-php.cn

Solve the problems encountered during the implementation of JS component bootstrap table paging

高洛峰

Release： 2017-01-04 11:55:31

Original

1716 people have browsed it

This article shares the bootstrap-table paging problem for your reference. The specific content is as follows

Question 1: The server cannot get the form value. There is no problem with the querystring, but the request.form cannot be obtained. 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

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

Copy after login

Question 2. Set the parameters passed to the server

Method:

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,

Copy after login

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

Solution:

1Set in queryParams

2 In bootstrap- The table.minjs file modifies the source file to

"limit"===this.options.queryParamsType&&(e={limit:e.pageSize,pageNumber:e.pageNumber,

Modify bootstrap- table.js can also be

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

Copy after login

configured to 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>

Copy after login

Question 4. Re-search after paging

Premise: Customized search with 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 pieces of data, and the result 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(){
 
 $(&#39;#tableList&#39;).bootstrapTable({pageNumber:1,pageSize:10});
 
}

Copy after login

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

For more related articles on solving the problems encountered in the implementation of JS component bootstrap table paging, please pay attention to the PHP Chinese website. !