发布于 2017-02-25 18:43:47 | 120 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Bootstrap v3教程,程序狗速度看过来!

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


这篇文章主要为大家详细介绍了JS组件Bootstrap Table分页使用方法,具有一定的实用性,感兴趣的小伙伴们可以参考一下

学习使用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" ;

以上就是为大家分享的Bootstrap Table使用方法,希望对大家熟练掌握Bootstrap Table使用方法有所帮助。



相关阅读 :
JS组件Bootstrap Table使用实例分享
JS组件Bootstrap Table使用方法详解
JS组件Bootstrap Select2使用方法解析
JS组件Bootstrap Table布局详解
JS组件Bootstrap Select2使用方法详解
JS组件Bootstrap Table表格多行拖拽效果实现代码
JS组件Bootstrap Table表格行拖拽效果实现代码
JS表格组件神器bootstrap table使用指南详解
JS树形菜单组件Bootstrap TreeView使用方法详解
Bootstrap Table使用方法详解
JS组件Bootstrap实现图片轮播效果
JS组件Bootstrap按钮组与下拉按钮详解
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务