Solve the problems encountered in the implementation of JS Component bootstrap table paging _javascript skills

This article for everyone to share the issue of bootstrap-table pagination for your reference, the specific content as follows

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

Issue 2, setting the 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,

Problem 3, the background does not take pageSize information

Solve:

1 set in Queryparams

2 Modify source file in Bootstrap-table.minjs file as

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

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 two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

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