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.
According to most of the online saying: just reset option
$('#tableList').bootstrapTable({pageNumber:1,pageSize:10});The above cannot solve this problem.
The correct way to do it is
$("#table").bootstrapTable('destroy');The table must be destroyed first, otherwise the content loaded last will be retained
TableObj.oTableInit(); Re-initize the table.
The code looks like this:
<script type="text/javascript">$(function () {TableObj.oTableInit();$("#btn_query").click(function () {$("#tb_departments").bootstrapTable('destroy');TableObj.oTableInit();});$("#btn_edit").click(function () {$.messager.alert('tip', 'Please select the record to be deleted');});$("#btn_add").click(function () {var actionUrl = "@Url.Action("_create")";var param = {};Tool.ShowModal(actionUrl, param, "New");})});var TableObj = {//Initialize TableoTableInit: function () {$('#tb_departments').bootstrapTable({url: '/Department/GetDepartment', //Request the URL (*) method: 'get', //Request method (*) toolbar: '#toolbar', //Which container striped by the tool button is true, //Where to display the line interval color cache: false, //Whether to use cache, the default is true, so in general, you need to set this property (*) pagination: true, //Does the page display (*) sortable: false, //Does the sortOrder enable: "asc", //Sorting method//QueryParams: TableObj.queryParams(this), //Pass the parameters (*) queryParams: function (params) {return {PagedIndex: this.pageNumber,PagedSize: this.pageSize,DeptName: $("#txt_search_departmentname").val(),};},sidePagination: "server", //Pagination method: client client pagination, server server pagination (*) pageNumber: 1, //Initialize the first page to load, default first page pageSize: 5, //Number of record rows per page (*) pageList: [5, 10, 25, 50, 100], //Number of rows per page to select (*) search: false, // Whether to display table search, this search is a client search and will not enter the server, so I personally feel that it is meaningless strictSearch: true, showColumns: true, //Does all columns showRefresh: true, //Does the refresh button minimumCountColumns: 2, //The minimum number of columns allowed clickToSelect: true, //Does the click to select row height: 500, //Line height. If the height attribute is not set, the table will automatically feel the height of the table according to the number of records. UniqueId: "deptID", //The unique identifier of each row is generally the primary key column idField: 'deptID',showToggle: true, //Does the toggle buttons for detailed view and list view cardView: false, //Does the detailed view detailView: false, //Does the parent and child table columns: [{//field: 'deptID',//field: 'deptID',checkbox: true},{field: 'DeptName',title: 'Department name'}, {field: 'CreateBy',title: 'Add person'}, {field: 'CreateDT',title: 'Add date',formatter: function (val) {return val == 'undefined' || !val ? '-' : val.formatterString(false);}}]});}});};//Save function Save() {Tool.SaveModal($('#tb_departments'));}</script>The above is the solution to the BootStrap Table paging and re-search the problem after the BootStrap Table is introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!