jsp/main.jsp,发出请求
<a href="${APP_PATH}/user/toIndex.do"><i class="glyphicon glyphicon-user"></i> 用户维护</a>
1.Page类
import java.util.List;
public class Page {
private Integer pageno;
private Integer pagesize;
private List datas;
private Integer totalsize;
private Integer totalno;
public Page(Integer pageno, Integer pagesize) {
if (pageno <= 0) {
this.pageno = 1;
} else {
this.pageno = pageno;
}
if (pagesize <= 0) {
this.pagesize = 10;
} else {
this.pagesize = pagesize;
}
}
public Integer getPageno() {
return pageno;
}
public void setPageno(Integer pageno) {
this.pageno = pageno;
}
public Integer getPagesize() {
return pagesize;
}
public void setPagesize(Integer pagesize) {
this.pagesize = pagesize;
}
public List getDatas() {
return datas;
}
public void setDatas(List datas) {
this.datas = datas;
}
public Integer getTotalsize() {
return totalsize;
}
public void setTotalsize(Integer totalsize) {
this.totalsize = totalsize;
this.totalno = (totalsize % pagesize) == 0 ? (totalsize / pagesize) : (totalsize / pagesize + 1);
}
public Integer getTotalno() {
return totalno;
}
private void setTotalno(Integer totalno) { //setTotalno，private不允许设置，totalno由totalsize计算得出
this.totalno = totalno;
}
public Integer getStartIndex() {
return (this.pageno - 1) * pagesize;
}
}
2.UserController
//异步分页查询
@RequestMapping("/toIndex")
public String toIndex(){
return "user/index"; //异步，先直接到user/index.jsp，数据待会异步传入
}
//异步分页查询
@ResponseBody
@RequestMapping("/index")
public Object index(@RequestParam(value="pageno",required=false,defaultValue="1") Integer pageno,
@RequestParam(value="pagesize",required=false,defaultValue="10") Integer pagesize){
AjaxResult result = new AjaxResult();
try {
Page page = userService.queryPage(pageno, pagesize);
result.setSuccess(true);
result.setPage(page);
} catch (Exception e) {
result.setSuccess(false);
e.printStackTrace();
result.setMessage("查询数据失败！");
}
return result; //以流的形式传入序列化JSON数据
}
3.UserServiceImpl
@Override
public Page queryPage(Integer pageno, Integer pagesize) {
Page page = new Page(pageno,pagesize);
Integer startIndex = page.getStartIndex();
List<User> datas = userMapper.queryList(startIndex, pagesize);
page.setDatas(datas);
Integer totalsize = userMapper.queryCount();
page.setTotalsize(totalsize);
return page;
}
4.UserMapper.java
List<User> queryList(@Param("startIndex") Integer startIndex, @Param("pagesize") Integer pagesize);//多个参数需要指定mybatis才能注入
Integer queryCount();
5.UserMapper.xml
<select id="queryList" resultMap="BaseResultMap ">
select id, loginacct, userpswd,
username, email, createtime
from t_user limit #{startIndex},#{pagesize}
</select>
<select id="queryCount" resultType="int">
select count(*)
from t_user
</select>
6.user/index.jsp
(1)表格显示
<table class="table table-bordered">
<thead>
<tr >
<th width="30">#</th>
<th width="30"><input type="checkbox"></th>
<th>账号</th>
<th>名称</th>
<th>邮箱地址</th>
<th width="100">操作</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr >
<td colspan="6" align="center">
<ul class="pagination">
</ul>
</td>
</tr>
</tfoot>
</table>
①插入显示数据，导航条，上一页，点击页数，下一页，当前页高亮
<script type="text/javascript">
$(function () { //加载页面后立即执行此方法
$(".list-group-item").click(function(){
if ( $(this).find("ul") ) {
$(this).toggleClass("tree-closed");
if ( $(this).hasClass("tree-closed") ) {
$("ul", this).hide("fast");
} else {
$("ul", this).show("fast");
}
}
});
queryPageUser(1); //调用方法
});
$("tbody .btn-success").click(function(){
window.location.href = "assignRole.html";
});
$("tbody .btn-primary").click(function(){
window.location.href = "edit.html";
});
function pageChange(pageno){
//window.location.href="${APP_PATH}/user/index.do?pageno="+pageno ;
queryPageUser(pageno);
}
var jsonObj = {
"pageno" : 1,
"pagesize" : 10
};
var loadingIndex = -1 ;
function queryPageUser(pageno){
jsonObj.pageno = pageno ;
$.ajax({
type : "POST",
data : jsonObj,
url : "${APP_PATH}/user/index.do", //异步查询数据后传回并刷新
beforeSend : function(){
loadingIndex = layer.load(2, {time: 10*1000});
return true ;
},
success : function(result){
layer.close(loadingIndex);
if(result.success){
var page = result.page ;
var data = page.datas ;
var content = '';
//i为序列号，n为取出data里的值，即每个user
$.each(data,function(i,n){
content+='<tr>';
content+=' <td>'+(i+1)+'</td>';
content+=' <td><input type="checkbox"></td>';
content+=' <td>'+n.loginacct+'</td>';
content+=' <td>'+n.username+'</td>';
content+=' <td>'+n.email+'</td>';
content+=' <td>';
content+=' <button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>';
content+=' <button type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>';
content+=' <button type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>';
content+=' </td>';
content+='</tr>';
});
$("tbody").html(content);//将拼接的字符串content传入<tbody> </tbody>中
var contentBar = '';
if(page.pageno==1 ){
contentBar+='<li class="disabled"><a href="#">上一页</a></li>';
}else{
contentBar+='<li><a href="#" onclick="pageChange('+(page.pageno-1)+')">上一页</a></li>';
}
for(var i = 1 ; i<= page.totalno ; i++ ){
contentBar+='<li';
if(page.pageno==i){
contentBar+=' class="active"';
}
contentBar+='><a href="#" onclick="pageChange('+i+')">'+i+'</a></li>';
}
if(page.pageno==page.totalno ){
contentBar+='<li class="disabled"><a href="#">下一页</a></li>';
}else{
contentBar+='<li><a href="#" onclick="pageChange('+(page.pageno+1)+')">下一页</a></li>';
}
//将拼接的字符串contentBar传入<ul class="pagination"> </ul>中
$(".pagination").html(contentBar);
}else{
layer.msg(result.message, {time:1000, icon:5, shift:6});
}
},
error : function(){
layer.msg("加载数据失败!", {time:1000, icon:5, shift:6});
}
});
}
$("#queryBtn").click(function(){
var queryText = $("#queryText").val();
jsonObj.queryText = queryText ;
queryPageUser(1);
});
</script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
