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


Posted in Javascript onAugust 08, 2016

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

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

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

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

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

正确做法是

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

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

代码如下所示:

<script type="text/javascript">
$(function () {
TableObj.oTableInit();
$("#btn_query").click(function () {
$("#tb_departments").bootstrapTable('destroy');
TableObj.oTableInit();
});
$("#btn_edit").click(function () {
$.messager.alert('提示', '请选择要删除的记录');
});
$("#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'));
}
</script>

以上所述是小编给大家介绍的BootStrap Table 分页后重新搜索问题的解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery tools系列 expose 学习
Sep 06 Javascript
jquery.ui.draggable中文文档
Nov 24 Javascript
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
jQueryUI的Dialog的简单封装
Jun 07 Javascript
使用jQuery模板来展现json数据的代码
Oct 22 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
js微信分享实现代码
Oct 11 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
用js读写cookie的简单方法(推荐)
Aug 08 #Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 #Javascript
js中遍历Map对象的简单实例
Aug 08 #Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 #Javascript
js中 计算两个日期间的工作日的简单实例
Aug 08 #Javascript
WebSocket+node.js创建即时通信的Web聊天服务器
Aug 08 #Javascript
学习Javascript闭包(Closure)知识
Aug 07 #Javascript
You might like
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
PHP编码转换
2012/11/05 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
微信自定义菜单的处理开发示例
2015/04/16 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
js更优雅的兼容
2010/08/12 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
js的2种继承方式详解
2014/03/04 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
jQuery复制表单元素附源码分享效果演示
2015/09/30 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
Python实现的双色球生成功能示例
2017/12/18 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
python怎么对数字进行过滤
2020/07/05 Python
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
职称评定自我鉴定
2014/03/18 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
励志演讲稿200字
2014/08/21 职场文书
八年级英语教学反思
2016/02/15 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP