Bootstrap Table Page Paging problem summary _javascript tips

First of all, thank the author for the bootstrap table paging problem detailed collation, and share to everyone, hope that through this article can help you solve bootstrap table pagination of various issues, thank you for your reading.

Question 1: The server side cannot get the form value, querystring no problem, but Request.Form cannot get the value

FIX: This is an AJAX problem, the original code uses native Ajax. 1 can be solved with a read stream file. 2 If you want to use Request.Form way, set ContentType: "Application/x-www-form-urlencoded",

Such as

 $ (' #tableList '). Bootstraptable ({method
: ' Post ',
URL: "",
Height: $ (window). Height ()-
striped : True,
dataType: "JSON",
pagination:true,
"Queryparamstype": "Limit",
singleselect:false,
contentType: "application/x-www-form-urlencoded",

Question 2: setting parameters to be 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 ()-
Striped:true,
dataType: "JSON",
pagination:true, 

queryparams:queryparams,

Question 3: No pageSize information is being fetched from the background

Solve:

1. Set in Queryparams

2, in the Bootstrap-table.minjs file to modify the source file for "Limit" ===this.options.queryparamstype&& (E={limit:e.pagesize, Pagenumber:e.pagenumber,

Modifying Bootstrap-table.js can also

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 to join "Queryparamstype": "Limit",

Complete:

<script type= "Text/javascript" > $ (document). Ready (function () {$ (' #tableList '). Bootstraptable ({method: ' Post ' , url: "Getcompapylist", Height: $ (window). Height ()--Striped:true, DataType: "JSON", Pagination:true, "Queryparams
Type ":" 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 dropdown box (select displayed column) sidepagination: "Server",//Service side 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 ', titl

E: ' name ', 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};}

}///passed parameter function Queryparams (params) {return {pageSize:params.limit, pageNumber:params.pageNumber, Username:4

};

 } </script>

Question 4: After paging, the question of re-searching

Prerequisite: Custom Search with paging functionality, such as the ability to search for product names.

Phenomenon: When searching for inflatable dolls, return 100 records and turn to page fifth.  This time the search massage stick, the data has 200, the result should be the first page of the record, but the actual display is the result of page fifth. That is, after the search, PageNumber has not changed.

Workaround: reset option on the line.

 function Search () {

 $ (' #tableList '). Bootstraptable ({pagenumber:1,pagesize:10});

If you want to further study, you can click here to learn, and then attach 3 wonderful topics:

Bootstrap Learning Course

Bootstrap Practical Course

Bootstrap Table Use Tutorial

Bootstrap Plugin Usage Tutorial

The above is the entire content of this article, I hope to help you learn.