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 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
javascript 动态数据下的锚点错位问题解决方法
Dec 24 Javascript
禁止js文件缓存的代码
Apr 09 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
Js代码中的span拼接问题解决
Nov 22 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 函数学习简单小结
2010/07/08 PHP
php新建文件自动编号的思路与实现
2011/06/27 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
2011/12/08 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
JavaScript实现刷新不重记的倒计时
2016/08/10 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
利用Vue v-model实现一个自定义的表单组件
2017/04/27 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
python numpy实现多次循环读取文件 等间隔过滤数据示例
2020/03/14 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
Python调用飞书发送消息的示例
2020/11/10 Python
英语专业推荐信
2013/11/16 职场文书
初中校园广播稿
2014/02/02 职场文书
本科生求职信
2014/06/17 职场文书
人事代理委托书
2014/09/27 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
思想政治表现评语
2015/01/04 职场文书
小班教师个人总结
2015/02/05 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
详解Html5项目适配系统深色模式方案总结
2021/04/14 HTML / CSS
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android