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插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
Feb 25 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
jQuery检测某个元素是否存在代码分享
Jul 09 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
jquery实现倒计时功能
Dec 28 Javascript
理解javascript异步编程
Jan 27 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 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
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
php断点续传之文件分割合并详解
2016/12/13 PHP
Laravel网站打开速度优化的方法汇总
2017/07/16 PHP
jquery ready函数源代码研究
2009/12/06 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
js获取上传文件的绝对路径实现方法
2016/08/02 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
python属于跨平台语言码
2020/06/09 Python
CSS3教程:边框属性border的极致应用
2009/04/02 HTML / CSS
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
意大利奢侈品牌在线精品店:Jole.it
2020/11/23 全球购物
Python中如何定义一个函数
2016/09/06 面试题
银行自荐信范文
2013/10/07 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
领导班子对照检查材料
2014/09/22 职场文书
2019年教师入党申请书
2019/06/27 职场文书
MySQL如何使用使用Xtrabackup进行备份和恢复
2021/06/21 MySQL
vue 实现弹窗关闭后刷新效果
2022/04/08 Vue.js
排查MySQL生产环境索引没有效果
2022/04/11 MySQL