Solve the problem after querying the BootStrap Table by PAGE and then searching again by bootstrap

Solve the problem after querying the BootStrap Table by PAGE and then searching again by bootstrap

Prerequisites: Custom Search and paging functions are available, such as the product name search function.

Symptom: when searching for an inflatable doll, 100 records are returned, turning to the fifth page. at this time, there are 200 pieces of data in the massage stick search, and the result should be the first page of record, but the result is still displayed on the fifth page. that is, the pagenumber is not changed after the research.

As most of the internet says: just reset option.

$('#tableList').bootstrapTable({pageNumber:1,pageSize:10});

The above cannot solve this problem.

The correct method is

$ ("# Table"). bootstrapTable ('deststroy'); destroy the table first; otherwise, the last loaded content will be retained.

TableObj. oTableInit (); Modify the table again.

The Code is as follows:

<Script type = "text/javascript"> $ (function () {TableObj. oTableInit (); $ ("# btn_query "). click (function () {$ ("# tb_ments ments "). bootstrapTable ('deststroy'); TableObj. oTableInit () ;}); $ ("# btn_edit "). click (function () {$. messager. alert ('hprompt ', 'select the record to be deleted');}); $ ("# btn_add "). click (function () {var actionUrl = "@ Url. action ("_ create") "; var param = {}; Tool. showModal (actionUrl, param, "add") ;}); var TableObj ={// initial TableoTableInit: function () {$ ('# tb_ments ments '). bootstrapTable ({url: '/Department/GetDepartment', // request background URL (*) method: 'get', // Request method (*) toolbar: '# toolbar', // container used by the tool button striped: true, // whether to display the row interval color cache: false, // whether to use the cache. The default value is true, therefore, you need to set this attribute (*) pagination: true, // whether to display paging (*) sortable: false, // whether to enable sorting sortOrder: "asc ", // sorting method // queryParams: TableObj. queryParams (this), // pass the parameter (*) queryParams: function (Params) {return {PagedIndex: this. pageNumber, PagedSize: this. pageSize, DeptName: $ ("# txt_search_departmentname "). val (), };}, sidePagination: "server", // paging mode: client page, server Page (*) pageNumber: 1, // initialize loading the first page, default first page pageSize: 5, // number of records per page (*) pageList: [5, 10, 25, 50,100], // The number of lines per page (*) search: false, // whether to display table search. this search is a client search and will not be performed on the server. Therefore, personally, it is of little significance to strictSearch: true, showColumns: true, // whether to display showRefresh for all columns: True, // whether to display the refresh button minimumCountColumns: 2, // the minimum allowed number of columns clickToSelect: true, // whether to enable the selected Row height: 500, // The Row height, if the height attribute is not set, the table automatically determines the table height uniqueId: "deptID" based on the number of records, // the unique identifier of each row, usually the primary key column idField: 'demotid', showToggle: true, // whether to display the switch button of the detailed view and List View cardView: false, // whether to display the detailed view detailView: false, // whether to display the Parent and Child table columns: [{// field: 'demotid', // field: 'demotid', checkbox: true}, {field: 'deptname', title: 'department name '}, {field: 'createby', title: 'Add'}, {field: 'createdt', title: 'adddate', formatter: function (val) {return val = 'undefined' |! Val? '-': Val. formatterString (false) ;}}]}) ;}}; // Save function Save () {Tool. saveModal ($ ('# tb_ments ments');} </script>

The above is a small Editor to introduce you to the BootStrap Table paging and then re-search for the solution to the problem, I hope to help you, if you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!