JS组件Bootstrap Table使用实例分享


Posted in Javascript onMay 30, 2016

学习使用bootstrap表格是对客户端进行分页的时候,在朋友的帮助下,找到了文档http://bootstrap-table.wenzhixin.net.cn/examples/                 
找到了传到后台的每页条数Limit,和记录开始数Offset。             
开始封装,分享一下我的代码,从bootstrap table 获取页码和页数,并交给后台处理。

$('#table').bootstrapTable({
  url: '<%=path%>/FeedList.cqzk',
  striped: true,
  pagination: true,
  pageList: [3,5,20],
  pageSize:3,
  pageNumber:1,
  sidePagination:'server',//设置为服务器端分页
  columns: [{
  field: 'title',
  title: '标题'
  }, {
  field: 'creatTime',
  title: '时间'
  } ]
 });



 @RequestMapping(value = "/FeedList.cqzk")
 @ResponseBody
 public String url_ad1(HttpServletRequest request,BootPage page) 
  throws ServletException,IOException,RuntimeException{
 
 @SuppressWarnings("unchecked") 
// List<Feedback> list = feedBackDao.find("from Feedback");
 BootPage pager = feedBackDao.getByPage("from Feedback",page,null);
 System.out.println((JSONArray.fromObject(pager)).getString(0).toString());
 return (JSONArray.fromObject(pager)).getString(0).toString(); 
 // 不写.getString(0) 就多一个中括号,返回的就是数组,写了就是返回第一个对象。
 }
 


public BootPage getByPage(String hql,BootPage pager,Map<String, Object> condition){
 if (pager == null) {
  throw new IllegalArgumentException("分页 不能为空!");
 }

 Query q = sessionFactory.getCurrentSession().createQuery(hql);
 q.setFirstResult(pager.getOffset());
 q.setMaxResults(pager.getLimit());

 if (condition != null) {
  q.setProperties(condition);
 }
 pager.setRows(q.list());
 pager.setTotal(this.countAll(hql, condition));
 return pager;
 
 }
 protected Long countAll(String hql, Map<String, Object> condition) {
 if (hql == null) {
  return 0l;
 }
 String tmpHql = hql.toLowerCase();
 String regex = hql.substring(0, tmpHql.indexOf("from"));
 hql = hql.replaceFirst(regex, "select count(*) ");
 Query q = sessionFactory.getCurrentSession().createQuery(hql);
 if (condition != null) {
  q.setProperties(condition);
 }
 return (Long) q.uniqueResult();
 }


public final class BootPage<T> {
 
 protected Long total;
 
 protected List<T> rows;
 
 protected int limit=0;
 
 protected int offset = 0;
 
 protected String order ="asc" ;

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是为大家分享的Bootstrap Table使用方法,希望对大家熟练掌握Bootstrap Table使用方法有所帮助。

Javascript 相关文章推荐
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
JS+CSS实现一个气泡提示框
Aug 18 Javascript
js打开新窗口方法整理
Feb 17 Javascript
JavaScript运算符小结
Jun 03 Javascript
BootStrap实现鼠标悬停下拉列表功能
Feb 17 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
详解Vue前端生产环境发布配置实战篇
May 07 Javascript
小程序如何构建骨架屏
May 29 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
Ajax异步刷新功能及简单案例
Nov 20 Javascript
Bootstrap table分页问题汇总
May 30 #Javascript
浅析Javascript中bind()方法的使用与实现
May 30 #Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 #Javascript
深入理解JavaScript中的call、apply、bind方法的区别
May 30 #Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 #Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 #Javascript
js实现页面a向页面b传参的方法
May 29 #Javascript
You might like
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
Prototype Number对象 学习
2009/07/19 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
深入理解JavaScript是如何实现继承的
2013/12/12 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
javascript Array 数组常用方法
2015/04/05 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
JS实现图片切换效果
2018/11/17 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
Python 26进制计算实现方法
2015/05/28 Python
Python实现购物车功能的方法分析
2017/11/10 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
python实现机器学习之多元线性回归
2018/09/06 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
实习生自我评价
2014/01/18 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
企业培训简报范文
2015/07/20 职场文书
学术会议领导致辞
2015/07/29 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
教师纪律作风整顿心得体会
2016/01/23 职场文书
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python
mysql如何配置白名单访问
2021/06/30 MySQL
Redis基本数据类型String常用操作命令
2022/06/01 Redis
字节飞书面试promise.all实现示例
2022/06/16 Javascript