JS組件Bootstrap Table使用實(shí)例分享
學(xué)習(xí)使用bootstrap表格是對(duì)客戶端進(jìn)行分頁(yè)的時(shí)候,在朋友的幫助下,找到了文檔http://bootstrap-table.wenzhixin.net.cn/examples/
找到了傳到后臺(tái)的每頁(yè)條數(shù)Limit,和記錄開(kāi)始數(shù)Offset。
開(kāi)始封裝,分享一下我的代碼,從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)文章
微信小程序授權(quán)登錄的最新實(shí)現(xiàn)方案詳解(2023年)
最近由于公司需要研究了一下微信小程序的開(kāi)發(fā),特此記錄一下小程序登錄授權(quán)的流程,便于自己理解,也希望對(duì)他人有多幫助,下面這篇文章主要給大家介紹了關(guān)于微信小程序授權(quán)登錄的最新實(shí)現(xiàn)方案的相關(guān)資料,需要的朋友可以參考下2023-02-02
js獲取兩個(gè)數(shù)組對(duì)象的差集實(shí)現(xiàn)方法
這篇文章主要為大家介紹了js獲取兩個(gè)數(shù)組對(duì)象的差集實(shí)現(xiàn)方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏
這篇文章主要介紹了JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01
JS基于Mootools實(shí)現(xiàn)的個(gè)性菜單效果代碼
這篇文章主要介紹了JS基于Mootools實(shí)現(xiàn)的個(gè)性菜單效果代碼,涉及JavaScript頁(yè)面元素的遍歷及樣式的動(dòng)態(tài)操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
JavaScript通過(guò)正則表達(dá)式實(shí)現(xiàn)表單驗(yàn)證電話號(hào)碼
JavaScript判斷一個(gè)輸入量是否為電話號(hào)碼,通過(guò)正則表達(dá)式實(shí)現(xiàn),需要的朋友可以參考下2014-03-03
JS綁定事件監(jiān)聽(tīng)的幾種實(shí)現(xiàn)方法匯總
在JavaScript中事件監(jiān)聽(tīng)是一種用于處理用戶交互的機(jī)制,下面這篇文章主要給大家介紹了關(guān)于JS綁定事件監(jiān)聽(tīng)的幾種實(shí)現(xiàn)方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
js+css實(shí)現(xiàn)超簡(jiǎn)潔的二級(jí)下拉菜單效果代碼
這篇文章主要介紹了js+css實(shí)現(xiàn)超簡(jiǎn)潔的二級(jí)下拉菜單效果代碼,通過(guò)非常簡(jiǎn)單的JavaScript遍歷頁(yè)面元素及動(dòng)態(tài)設(shè)置樣式達(dá)到二級(jí)下拉菜單的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09

