Bootstrap列表分页及查询(数据与页面分离形式)
2016-05-31 14:52
645 查看
Bootstrap两种分页形式:
全部加载数据,然后在js中分页和查询;后台分页,通过后台加载一页的数据;后台发送json格式的数据到前台,前台通过js处理,生成table等,html或者jsp页面显示。
两种方式都通过【$(‘页面table的ID’).bootstrapTable{()};】函数来处理数据。下面说下里面的参数
1.method:请求方式。两种get和post。
2.url:请求地址。
3.dataType:类型。json
4.search:是否显示搜索框。true:不显示
;false:显示
5.sidePagination:设置为服务器端分页
。参数有两种,server:服务端请求;client:客户端请求
6.pageSize:每页条数。
7.queryParams:设置参数(想后台发的参数,4个:a.limit;b.offset;c.search;d.order;e.sort;)
8.responseHandler:响应后台参数。
9.columns:[{}] 数据列
注:请求地址js会加入参数“limit=5&offset=0&order=asc”。limit参数是上述的pageSize;offset是每页第一条数,例如:第一页offset=0;第二页offset=10。
前端
后台controller(分页暂时未封装)
[align=left]列的属性:
1.field:后台json中key
[/align]
[align=left]2.title:标题
[/align]
[align=left]3.visible: 是否隐藏列 false:隐藏 true:不隐藏
4.sortable: 是否可以排序 true:可以 false:不可以
5.valign: 对其方式
[/align]
6.formatter:function(value, row, index){} 自定义列中内容(例如:修改按钮、删除按钮)
[align=left]7.events:function(){} 对自定义列中内容的操作函数(例如:修改、删除)
[/align]
项目下载地址:http://vdisk.weibo.com/s/tnPMj8sanfnT/1427438640
全部加载数据,然后在js中分页和查询;后台分页,通过后台加载一页的数据;后台发送json格式的数据到前台,前台通过js处理,生成table等,html或者jsp页面显示。
两种方式都通过【$(‘页面table的ID’).bootstrapTable{()};】函数来处理数据。下面说下里面的参数
1.method:请求方式。两种get和post。
2.url:请求地址。
3.dataType:类型。json
4.search:是否显示搜索框。true:不显示
;false:显示
5.sidePagination:设置为服务器端分页
。参数有两种,server:服务端请求;client:客户端请求
6.pageSize:每页条数。
7.queryParams:设置参数(想后台发的参数,4个:a.limit;b.offset;c.search;d.order;e.sort;)
8.responseHandler:响应后台参数。
9.columns:[{}] 数据列
注:请求地址js会加入参数“limit=5&offset=0&order=asc”。limit参数是上述的pageSize;offset是每页第一条数,例如:第一页offset=0;第二页offset=10。
前端
后台controller(分页暂时未封装)
[align=left]列的属性:
1.field:后台json中key
[/align]
[align=left]2.title:标题
[/align]
[align=left]3.visible: 是否隐藏列 false:隐藏 true:不隐藏
4.sortable: 是否可以排序 true:可以 false:不可以
5.valign: 对其方式
[/align]
6.formatter:function(value, row, index){} 自定义列中内容(例如:修改按钮、删除按钮)
[align=left]7.events:function(){} 对自定义列中内容的操作函数(例如:修改、删除)
[/align]
项目下载地址:http://vdisk.weibo.com/s/tnPMj8sanfnT/1427438640
相关文章推荐
- 新工作上班九天心得(附 bootstrap分页写法)
- thinkphp框架page类与bootstrap分页(美化)
- 解决 bootstrap 在IE8下的兼容问题
- bootstrap css布局
- bootstrap表格
- 57-005-2 bootstrap实现分页显示
- BootStrap创建响应式导航条实例代码
- Bootstrap时间控件 datetimepicker
- 2016年5月31日上午(传智Bootstrap笔记(Bootstrap 布局组件输入框组))
- Mirantis OpenStack Fuel—MOS本地源/bootstrap制作
- bootstrapvalidator之API学习
- 基于bootstrap的autocomplete自动提示选择项插件
- Jackknife,Bootstrap, Bagging, Boosting, AdaBoost, RandomForest 和 Gradient Boosting的区别
- Bootstrap-查询按钮和重置按钮
- 一款bootstrap树形js
- bootstrap如何把表单select input button弄在一行
- 2016年5月30日下午(传智Bootstrap笔记八(Bootstrap 布局组件))
- BootStrap中Tab页签切换实例代码
- 拥Bootstrap入怀――导航栏篇
- 基于Bootstrap实现tab标签切换效果