JS組件Bootstrap Table使用實(shí)例分享
學(xué)習(xí)使用bootstrap表格是對(duì)客戶端進(jìn)行分頁(yè)的時(shí)候,在朋友的幫助下,找到了文檔http://bootstrap-table.wenzhixin.net.cn/examples/
找到了傳到后臺(tái)的每頁(yè)條數(shù)Limit,和記錄開始數(shù)Offset。
開始封裝,分享一下我的代碼,從bootstrap table 獲取頁(yè)碼和頁(yè)數(shù),并交給后臺(tái)處理。
$('#table').bootstrapTable({ url: '<%=path%>/FeedList.cqzk', striped: true, pagination: true, pageList: [3,5,20], pageSize:3, pageNumber:1, sidePagination:'server',//設(shè)置為服務(wù)器端分頁(yè) columns: [{ field: 'title', title: '標(biāo)題' }, { field: 'creatTime', title: '時(shí)間' } ] }); @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) 就多一個(gè)中括號(hào),返回的就是數(shù)組,寫了就是返回第一個(gè)對(duì)象。 } public BootPage getByPage(String hql,BootPage pager,Map<String, Object> condition){ if (pager == null) { throw new IllegalArgumentException("分頁(yè) 不能為空!"); } 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" ;
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是為大家分享的Bootstrap Table使用方法,希望對(duì)大家熟練掌握Bootstrap Table使用方法有所幫助。
- JS組件Bootstrap Table布局詳解
- JS表格組件神器bootstrap table詳解(強(qiáng)化版)
- JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調(diào)序】
- JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】
- JS組件Bootstrap Table使用方法詳解
- JS表格組件神器bootstrap table詳解(基礎(chǔ)版)
- JS組件Bootstrap Table表格多行拖拽效果實(shí)現(xiàn)代碼
- JS組件Bootstrap Table表格行拖拽效果實(shí)現(xiàn)代碼
- 以BootStrap Tab為例寫一個(gè)前端組件
相關(guān)文章
JavaScript webpack模塊打包器如何優(yōu)化前端性能
本系列主要整理前端面試中需要掌握的知識(shí)點(diǎn)。本節(jié)介紹webpack如何優(yōu)化前端性能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08Layui點(diǎn)擊圖片彈框預(yù)覽的實(shí)現(xiàn)方法
今天小編就為大家分享一篇Layui點(diǎn)擊圖片彈框預(yù)覽的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09關(guān)于IE瀏覽器以及Firefox下的javascript冒泡事件的響應(yīng)層級(jí)
原來是由于IE瀏覽器以及Firefox對(duì)于冒泡型事件的支持層次不同造成的。(如對(duì)冒泡事件不是很了解可先查詢相關(guān)資料)2010-10-10css值轉(zhuǎn)換成數(shù)值請(qǐng)拋棄parseInt
絕大多數(shù)人喜歡用parseInt()把css中的字符串值轉(zhuǎn)換成數(shù)值2011-10-10Object.defineProperty()函數(shù)之屬性描述對(duì)象
這篇文章主要介紹了Object.defineProperty()函數(shù)之屬性描述對(duì)象,JavaScript?提供了一個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu),用來描述對(duì)象的屬性,控制它的行為,比如該屬性是否可寫、可遍歷等等。這個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)稱為:屬性描述對(duì)象2022-09-09基于Echarts實(shí)現(xiàn)繪制立體柱狀圖的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何基于Echarts實(shí)現(xiàn)繪制立體柱狀圖的功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,需要的可以參考一下2023-02-02