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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
javascript Select标记中options操作方法集合
Oct 22 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
Vue发布项目实例讲解
Jul 17 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
使用phpQuery采集网页的方法
2013/11/13 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
2014/08/18 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
微信小程序时间选择插件使用详解
2018/12/28 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
Python实现树的先序、中序、后序排序算法示例
2017/06/23 Python
Python正确重载运算符的方法示例详解
2017/08/27 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
python求最大值最小值方法总结
2019/06/25 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
应届大学生求职信
2013/12/01 职场文书
大学三年的自我评价
2013/12/25 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
竞选班干部演讲稿400字
2014/08/20 职场文书
工程索赔意向书
2014/08/30 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
大学生见习总结报告
2015/06/24 职场文书
纪委立案决定书
2015/06/24 职场文书
浅谈mysql执行过程以及顺序
2021/05/12 MySQL
使用python创建股票的时间序列可视化分析
2022/03/03 Python
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers