First of all, I would like to thank the author for sorting out the detailed questions about bootstrap table pagination and sharing them with you. I hope this article can help you solve various problems in Bootstrap table pagination. Thank you for your reading.
Question 1: The server cannot get the form value, there is no problem with querystring, but the request.form cannot get the value
Solution: This is a problem with ajax, the original code uses native ajax. 1 can be solved by reading stream files. 2 If you want to use request.form method, set contentType: "application/x-www-form-urlencoded",
like
$('#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,Question 3: The pageSize information cannot be retrieved in the background
solve:
1. Set it in queryParams
2. In the bootstrap-table.minjs file, modify the source file to "limit"=== this.options.queryParamsType&&(e={limit:e.pageSize,pageNumber:e.pageNumber,
Modifying bootstrap-table.js is also OK
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 "queryParamsType": "limit",
whole:
<script type="text/javascript">$(document).ready(function() { $('#tableList').bootstrapTable({method: 'post',url: "getcompappylist",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, //Do not display the search box showColumns: false, //Do not display the drop-down box (select the displayed column) sidePagination: "server", //Server request 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: 'name',width: 100,align: 'center',valign: 'middle',sortable: false}]});});function responseHandler(res) {if (res.IsOk) {var result = b64.decode(res.ResultValue);var resultStr = $.parseJSON(res);return {"rows": resultStr.Items,"total": resultStr.TotalItems};} else {return {"rows": [],"total": 0};}}//Passed parameter function queryParams(params) {return {pageSize: params.limit,pageNumber: params.pageNumber,UserName: 4};}</script>Question 4: Re-search after paging
Prerequisite: Custom search and paging functions, such as the function of searching for product names.
Phenomenon: When searching for inflatable dolls, return 100 records and turn to page 5. At this time, search for massage sticks, there are 200 data, and the result should be the record on the first page, but the actual display is the result on the fifth page. That is, after searching again, the pagenumber has not changed.
Solution: Just reset the option.
function search(){ $('#tableList').bootstrapTable({pageNumber:1,pageSize:10});}If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap Table usage tutorial
Bootstrap plug-in usage tutorial
The above is all about this article, I hope it will be helpful to everyone's learning.