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 相关文章推荐
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
jQuery Validate插件实现表单强大的验证功能
Dec 18 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 Javascript
Three.js学习之文字形状及自定义形状
Aug 01 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
JS轮播图的实现方法
Aug 24 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
php 定义404页面的实现代码
2012/11/19 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
PHP时间日期增减操作示例【date strtotime实现加一天、加一月等操作】
2018/12/21 PHP
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
js实现百度搜索提示框
2017/02/05 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
python使用tensorflow深度学习识别验证码
2018/04/03 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
python3对接mysql数据库实例详解
2019/04/30 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
python安装及变量名介绍详解
2020/12/12 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
研究生毕业鉴定
2014/01/29 职场文书
工作睡觉检讨书
2014/02/25 职场文书
党员承诺书格式
2014/05/21 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
Go语言怎么使用变长参数函数
2022/07/15 Golang