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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
Sep 08 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
vue中vee validate表单校验的几种基本使用
Jun 25 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 Javascript
html实现随机点名器的示例代码
Apr 02 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详细彻底学习Smarty
2008/03/27 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
js实现时间轴自动排列效果
2017/03/09 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
vue和webpack项目构建过程常用的npm命令详解
2018/06/15 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
微信小程序select下拉框实现效果
2019/05/15 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
[32:07]完美世界DOTA2联赛PWL S3 LBZS vs Rebirth 第一场 12.16
2020/12/17 DOTA
Python算法之栈(stack)的实现
2014/08/18 Python
Linux下Python获取IP地址的代码
2014/11/30 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
导入tensorflow时报错:cannot import name 'abs'的解决
2019/10/10 Python
python滑块验证码的破解实现
2019/11/10 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
python 检测图片是否有马赛克
2020/12/01 Python
党员民主评议总结
2014/10/20 职场文书
旷工检讨书大全
2015/08/15 职场文书
Python天气语音播报小助手
2021/09/25 Python
JavaScript流程控制(循环)
2021/12/06 Javascript