JS組件Bootstrap Table使用實例分享
學(xué)習(xí)使用bootstrap表格是對客戶端進行分頁的時候,在朋友的幫助下,找到了文檔http://bootstrap-table.wenzhixin.net.cn/examples/
找到了傳到后臺的每頁條數(shù)Limit,和記錄開始數(shù)Offset。
開始封裝,分享一下我的代碼,從bootstrap table 獲取頁碼和頁數(shù),并交給后臺處理。
$('#table').bootstrapTable({
url: '<%=path%>/FeedList.cqzk',
striped: true,
pagination: true,
pageList: [3,5,20],
pageSize:3,
pageNumber:1,
sidePagination:'server',//設(shè)置為服務(wù)器端分頁
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) 就多一個中括號,返回的就是數(shù)組,寫了就是返回第一個對象。
}
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" ;
如果大家還想深入學(xué)習(xí),可以點擊這里進行學(xué)習(xí),再為大家附3個精彩的專題:
以上就是為大家分享的Bootstrap Table使用方法,希望對大家熟練掌握Bootstrap Table使用方法有所幫助。
相關(guān)文章
JavaScript webpack模塊打包器如何優(yōu)化前端性能
本系列主要整理前端面試中需要掌握的知識點。本節(jié)介紹webpack如何優(yōu)化前端性能,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
關(guān)于IE瀏覽器以及Firefox下的javascript冒泡事件的響應(yīng)層級
原來是由于IE瀏覽器以及Firefox對于冒泡型事件的支持層次不同造成的。(如對冒泡事件不是很了解可先查詢相關(guān)資料)2010-10-10
css值轉(zhuǎn)換成數(shù)值請拋棄parseInt
絕大多數(shù)人喜歡用parseInt()把css中的字符串值轉(zhuǎn)換成數(shù)值2011-10-10
Object.defineProperty()函數(shù)之屬性描述對象
這篇文章主要介紹了Object.defineProperty()函數(shù)之屬性描述對象,JavaScript?提供了一個內(nèi)部數(shù)據(jù)結(jié)構(gòu),用來描述對象的屬性,控制它的行為,比如該屬性是否可寫、可遍歷等等。這個內(nèi)部數(shù)據(jù)結(jié)構(gòu)稱為:屬性描述對象2022-09-09

