This article shares the problem of bootstrap-table pagination for your reference. The specific content is as follows
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:
1Set in queryParams
2 Modify the source file in the bootstrap-table.minjs 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-searched questions 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 learn in depth, you can click here to learn and attach two exciting topics to you: Bootstrap learning tutorial Bootstrap practical tutorial
The above is all about this article, I hope it will be helpful to everyone's learning.