BootStrap Table Solution to Re search Problem after Paging

  • 2021-07-09 07:00:50
  • OfStack

Prerequisite: Custom search and paging function, such as the function of searching product name.

Phenomena: When searching for inflatable dolls, return 100 records and turn to page 5. At this time, when searching for massage sticks, there are 200 data, and the result should be the record on page 1, but the actual result is still the result on page 5. That is, after searching again, pagenumber has not changed.

According to most of the words on the Internet: just reset option


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

The above can't solve this problem.

The right thing to do is

$("# table"). bootstrapTable ('destroy'); table must be destroyed first, otherwise the last loaded content will be preserved

TableObj. oTableInit (); Re-enumerate 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(' Prompt ', ' Please select a record to delete ');
});
$("#btn_add").click(function () {
var actionUrl = "@Url.Action("_create")";
var param = {};
Tool.ShowModal(actionUrl, param, " Add ");
})
});
var TableObj = {
// Initialization Table
oTableInit: function () {
$('#tb_departments').bootstrapTable({
url: '/Department/GetDepartment', // Request background URL ( * ) 
method: 'get', // Request mode ( * ) 
toolbar: '#toolbar', // Which container does the tool button use 
striped: true, // Whether to display line spacing colors 
cache: false, // Whether to use caching, the default is true , so 1 Under normal circumstances, you need to set 1 Below this property ( * ) 
pagination: true, // Whether to display paging ( * ) 
sortable: false, // Do you want to enable sorting 
sortOrder: "asc", // Sorting mode 
// queryParams: TableObj.queryParams(this), // Passing parameters ( * ) 
queryParams: function (params) {
return {
PagedIndex: this.pageNumber,
PagedSize: this.pageSize,
DeptName: $("#txt_search_departmentname").val(),
};
},
sidePagination: "server", // Paging method: client Client paging, server Server-side paging ( * ) 
pageNumber: 1, // Initializes loading the 1 Page, default 1 Page 
pageSize: 5, // Number of record lines per page ( * ) 
pageList: [5, 10, 25, 50, 100], // Number of rows per page to choose from ( * ) 
search: false, // Whether to display table search, this search is a client search, will not enter the server, so, personal feeling is of little significance 
strictSearch: true,
showColumns: true, // Display all columns 
showRefresh: true, // Whether to display the refresh button 
minimumCountColumns: 2, // Minimum number of columns allowed 
clickToSelect: true, // Enable clicking on the selected line 
height: 500, // Row height, if not set height Property, the table automatically feels the height of the table according to the number of records 
uniqueId: "deptID", // Every 1 Row-only 1 Identification, 1 Like a primary key column 
idField: 'deptID',
showToggle: true, // Whether to display toggle buttons for detail view and list view 
cardView: false, // Whether to display a detailed view 
detailView: false, // Display parent-child table 
columns: [
{
//field: 'deptID',
//field: 'deptID',
checkbox: true
},
{
field: 'DeptName',
title: ' Department name '
}, {
field: 'CreateBy',
title: ' Adding person '
}, {
field: 'CreateDT',
title: ' Add date ',
formatter: function (val) {
return val == 'undefined' || !val ? '-' : val.formatterString(false);
}
}
]
});
}
};
// Save 
function Save() {
Tool.SaveModal($('#tb_departments'));
}
</script>

Related articles: