BootStrap Table 分页后重新搜索问题的解决办法

前端之家收集整理的这篇文章主要介绍了BootStrap Table 分页后重新搜索问题的解决办法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前提: 自定义搜索且有分页功能,比如搜索产品名的功能.

现象:当搜索充气娃娃的时候返回100条记录,翻到第五页. 这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的结果. 也就是重新搜索后,pagenumber没有变.

按网上大部分说的:重新设置option就行了

以上是解决不了这个问题。

正确做法是

$("#table").bootstrapTable('destroy');先要将table销毁,否则会保留上次加载的内容

TableObj.oTableInit();重新初使化表格。

代码如下所示:

提示','请选择要删除的记录'); }); $("#btn_add").click(function () { var actionUrl = "@Url.Action("_create")"; var param = {}; Tool.ShowModal(actionUrl,param,"新增"); }) }); var TableObj = { //初始化Table oTableInit: function () { $('#tb_departments').bootstrapTable({ url: '/Department/GetDepartment',//请求后台的URL(*) method: 'get',//请求方式(*) toolbar: '#toolbar',//工具按钮用哪个容器 striped: true,//是否显示行间隔色 cache: false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true,//是否显示分页(*) sortable: false,//是否启用排序 sortOrder: "asc",//排序方式 // queryParams: TableObj.queryParams(this),//传递参数(*) queryParams: function (params) { return { PagedIndex: this.pageNumber,PagedSize: this.pageSize,DeptName: $("#txt_search_departmentname").val(),}; },sidePagination: "server",//分页方式:client客户端分页,server服务端分页(*) pageNumber: 1,//初始化加载第一页,默认第一页 pageSize: 5,//每页的记录行数(*) pageList: [5,10,25,50,100],//可供选择的每页的行数(*) search: false,//是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 strictSearch: true,showColumns: true,//是否显示所有的列 showRefresh: true,//是否显示刷新按钮 minimumCountColumns: 2,//最少允许的列数 clickToSelect: true,//是否启用点击选中行 height: 500,//行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId: "deptID",//每一行的唯一标识,一般为主键列 idField: 'deptID',showToggle: true,//是否显示详细视图和列表视图的切换按钮 cardView: false,//是否显示详细视图 detailView: false,//是否显示父子表 columns: [ { //field: 'deptID',//field: 'deptID',checkBox: true },{ field: 'DeptName',title: '部门名称' },{ field: 'CreateBy',title: '添加人' },{ field: 'CreateDT',title: '添加日期',formatter: function (val) { return val == 'undefined' || !val ? '-' : val.formatterString(false); } } ] }); } }; //保存 function Save() { Tool.SaveModal($('#tb_departments')); }

以上所述是小编给大家介绍的BootStrap Table 分页后重新搜索问题的解决办法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/bootstrap/46725.html

猜你在找的Bootstrap相关文章