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>