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