您的位置:首页 > Web前端 > BootStrap

SSH和BootStrap-table分页

2015-10-13 23:29 435 查看
  接口管理项目中用的是SSH框架,页面用的bootstrap,在bootstrap-table调用后台数据时,遇到了好多"奇葩"问题,但都一一解决了,在此分享给大家。
 
  在这里解释一下bootstrap-table,在这里推荐一个网址:对bootstrap-table的使用,有非常好的讲解。
http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#pagination-table
其中分页有两种形式:

Client Side
不需要调用后台数据,数据格式为:http://wenzhixin.net.cn/p/bootstrap-table/docs/data2.json

Server Side
需要调用后台的数据,数据格式为:http://wenzhixin.net.cn/examples/bootstrap_table/data?offset=0&limit=10
因为我们的数据一般都需要从后台查询,所以我们这里分析Server Side分页。
定义PageBean
根据数据格式,我们可以得知从后台返回的Json串中有两个属性一个是total,一个是rows,rows是相应的集合。

public class PageBean<T> {
private int total;//总记录数
private List<T> rows;//实体集合

public int getTotal() {
returntotal;
}
public void setTotal(int total) {
this.total= total;
}
publicList<T> getRows() {
returnrows;
}
public void setRows(List<T> rows) {
this.rows= rows;
}
}


定义前台表格

<table id="myTable" data-toggle="table"data-pagination="true"
data-side-pagination="server" data-page-size="5"
data-page-list="[5,10, 15, 20]" data-search="true"
data-url="${pageContext.request.contextPath}/manage_loadpage.action">
<thead>
<tr>
<th data-width="15%" data-halign="center"data-sortable="true" data-field="id">姓名</th>
<th data-halign="center" data-sortable="true" data-field="role">角色</th>
<th data-halign="center" data-sortable="true"
data-field="userName">用户名</th>
<thdata-halign="center" data-sortable="true"
data-field="password">密码</th>
<thdata-halign="center" data-sortable="true"
data-field="email">邮箱</th>
<th data-halign="center" data-sortable="true" data-field="telephoneNumber">手机号</th>
</tr>
</thead>
</table>


后台方法:${pageContext.request.contextPath}/manage_loadpage.action(struts.xml&appliaction.xml读者自行配置)
action中

public void loadpage() throws IOException {
//如果企业号存在,则进行分页查询
PageBean<UserInfo>pageBean = manageuserservice.findUsersByPage(limit,
offset,"@3993");

JSONObjectj = JSONObject.fromObject(pageBean);

ServletActionContext.getResponse().getWriter().print(j);
}


实体转JSON的6Jar包:http://download.csdn.net/detail/itjavaer/8517177
service中

publicPageBean<UserInfo> findUsersByPage(int limit,
intoffset, String account) {

PageBean<UserInfo>pageBean = new PageBean<UserInfo>();
//查询总记录数
Integertotal = null;
total= manageusersDao.findCountByAccount(account);
pageBean.setTotal(total);

List<UserInfo>list = manageusersDao.findByPageAccount(account, offset +1, limit);
pageBean.setRows(list);

returnpageBean;
}


dao中

@Override
publicInteger findCountByAccount(String account) {
Stringhql = "select count(*) from UserInfo u where u.account=?";
List<Long>list = this.getHibernateTemplate().find(hql, account);
if(list != null && list.size() > 0) {
returnlist.get(0).intValue();
}
returnnull;
}

@Override
publicList<UserInfo> findByPageAccount(String account, Integer begin,
Integerlimit) {
Stringhql = "from UserInfo u where u.account=? ";
List<UserInfo>list = this.getHibernateTemplate().execute(
newPageHibernateCallback<UserInfo>(hql, new Object[] { account },
begin,limit));
returnlist;
}


<<PageHibernateCallback.java>>
分析一下注意事项:
实体转JSON
Client Server和Server
Side 的pageBean工具类的定义有区别,前者只有集合,后者有total
SSH是通过堆栈来进行前后台交互,没有return
XXXX,而是用流输出(我也不太懂)
相应的插件下载地址:http://wenzhixin.net.cn/p/bootstrap-table/docs/getting-started.html#download
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息