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

Solve the problems encountered during the implementation of JS component bootstrap table paging_javascript skills

WBOY

Release： 2016-05-16 15:04:41

Original

1332 people have browsed it

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

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

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

};

}

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

1 is set in queryParams

2 Modify the source file in 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);
}
}

Copy after login

Configuration added "queryParamsType": "limit",

Complete

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

Copy after login

Question 4. Search again after paging

Prerequisite: Custom 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. 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});

}

Copy after login

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