JS组件Bootstrap Table使用实例分享

时间:2021-05-26

学习使用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使用方法有所帮助。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章