JQuery分页插件
挺好用的
但是官方是没有提供首页尾页以及跳转功能
我觉得这个功能可以有，于是就改进了一下
一个js一个css从连接里面下
链接：http://pan.baidu.com/s/1nvaq99R 密码：9nfb
还有记得引入jquery，这个必须有
上效果图：
页面代码
<script type="text/javascript">
//分页查询开始
$(document).ready(function() {
getDataList(0, null);
}); var rows = 10;
var page = 1;
var initFlag = true; function getDataList(currPage, jg) { $.ajax({
url : "page",
type : "post",
dataType : 'json',
data : {rows : rows,page : currPage + 1},
contentType : "application/x-www-form-urlencoded; charset=utf-8",
success : function(response) {
if (response.result) {
if (response.data != null && response.data != ""&& response.total != undefined && response.total > 0) {
if (initFlag) {
$("#Pagination").pagination(
response.total,
{
items_per_page : rows,
num_edge_entries : 1,
num_display_entries : 8,
callback : getDataList//回调函数
});
initFlag = false;
}
$("#listData").html("");
loadDataList(response.data);
} else {
//暂无数据
}
} else {
//暂无数据
}
}
});
} function loadDataList(listdata) {
//表头
var html ="<tr class='t-header'>"+
"<td>头像</td>"+
"<td>姓名</td>"+
"<td>密码</td>"+
"</tr>";
$("#listData").append(html);
for (var i = 0; i < listdata.length; i++) {
var n = listdata[i];
//表格
var html = "<tr>"+
"<td>"+"<img src='getphoto?unid="+n.uuid+"' onerror='this.src=\"resources/img/default.png\"' style='width:48px;height:48px;border-radius:48px;'/>"+"</td>"+
"<td>"+n.username+"</td>"+
"<td>"+n.password+"</td>"+
"</tr>";
$("#listData").append(html);
}
}
//分页查询结束
</script>
<body>
<div class="clearbox">
<div class="x-box">
<h2><a>表格</a></h2>
<table id="listData"></table>
</div>
<div id="Pagination" class="pagination"></div>
</div>
</body>
后台代码
/**
* 分页请求地址
* @param request
* @param response
* @return
*/
@ResponseBody
@RequestMapping("page")
public Map<String, Object> page(HttpServletRequest request,HttpServletResponse response){
int total = userService.getTotal();
int page = Integer.parseInt(request.getParameter("page"));//当前页
int rows = Integer.parseInt(request.getParameter("rows"));//每页条数
List<User> data =userService.getCurrentPage((page-1)*rows, rows);
boolean result = (data == null)?false:true;
Map<String, Object> map = new HashMap<String, Object>();
map.put("data", data);
map.put("total", total);
map.put("result", result);
return map;
}
就先这样，有什么不清楚的可以给我留言。