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" ;

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

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