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 相关文章推荐
javascript与asp.net(c#)互相调用方法
Dec 13 Javascript
javascript中length属性的探索
Jul 31 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
JavaScript实现多维数组的方法
Nov 20 Javascript
百度判断手机终端并自动跳转js代码及使用实例
Jun 11 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
Vue中封装input组件的实例详解
Oct 17 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
vue实现密码显示隐藏切换功能
Feb 23 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
深入理解react 组件类型及使用场景
Mar 07 Javascript
用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 IPV6正则表达式验证代码
2010/02/16 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
Yii 使用intervention/image拓展实现图像处理功能
2019/06/22 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
jquery 表单进行客户端验证demo
2009/08/24 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
python之拟合的实现
2019/07/19 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
输入N,打印N*N矩阵
2012/02/20 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
vue项目实现分页效果
2021/03/24 Vue.js
师德师风剖析材料
2014/09/30 职场文书
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
信息简报范文
2015/07/21 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers