前端采用pagination分页插件,后端用ssm框架。
下载jquery.pagination.js.
normalize.css
pagination.css
其中 pagination.css修改你想要的样式
我用的是这个网页的分页插件http://www.jq22.com/jquery-info5697
下面讲代码(上面网页中api已经讲得非常清楚了我只讲与后端搭建)
前端:
当然首先得先引入js和css
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/pagination.css" media="screen">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.pagination.js"></script>
再则写div
<div class="wrapper">
<div class="eg">
<div class="M-box"></div>
<div class="tips">当前是第<span class="now">1</span>页,总共<span class="total"></span>页,总共<span class="count"></span>条数据</div>
</div>
</div>
再配置pagination
<script>
$(function() {
var totalPage = 1;//总共多少页
var totalRecords = 1;//总共多少条
var pageSize=4;//每页显示多少页
loadList(1);//初始化显示第一页
function loadList(pno)
{
$.ajax({
type:"post",
url:"/login/s/usercontroller/searchBusiEventInfo",//ajax获取地址
dataType: "json",
data: { 'pageNum': pno,'pageSize': pageSize},//传给后端的参数
success:function(result) {//成功后返回json数据
console.log(result);
console.log(pno);
if (result.success) {
var count = result.total;
var data = result.rows;
totalRecords = count;//总共多少条
totalPage = Math.ceil(count / pageSize);//总共多少页
var datalist="";
$.each(data, function(i, item) {//循环取出数据
datalist+='<tr>'+
'<td>'+item.uid+'</td>'+
'<td>'+item.username+'</td>'+
'<td>'+item.userpassword+'</td>'+
'</tr>';
});
$("#datalist1").html(datalist);
$('.total').text(totalPage);
$('.count').text(count);
$('.M-box').pagination({
pageCount: totalPage,
current:pno,//当前第几页
jump: true,
coping: true,
homePage: '首页',
endPage: '末页',
prevContent: '上页',
nextContent: '下页',
callback:PageClick//点击事件后回调
});
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('网络连接异常,请重试!')
}
});
}
//回调函数
PageClick = function(index){
$('.now').text(index.getCurrent());
loadList(index.getCurrent());//点击分页加载列表数据 */
}
});
</script>
源码:
<!DOCTYPE html>
<html lang="cn-ZH">
<head>
<meta charset="UTF-8">
<title>Mss。-pagination</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/normalize.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/pagination.css" media="screen">
</head>
<body>
<table width="80%" align="center">
<tr>
<td>id号</td>
<td>名字</td>
<td>密码</td>
</tr>
<tbody id="datalist1">
</tbody>
</table>
<div class="wrapper">
<div class="eg">
<div class="M-box"></div>
<div class="tips">当前是第<span class="now">1</span>页,总共<span class="total"></span>页,总共<span class="count"></span>条数据</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.pagination.js"></script>
<script>
$(function() {
var totalPage = 1;//总共多少页
var totalRecords = 1;//总共多少条
var pageSize=4;//每页显示多少页
loadList(1);
function loadList(pno)
{
$.ajax({
type:"post",
url:"/login/s/usercontroller/searchBusiEventInfo",
dataType: "json",
data: { 'pageNum': pno,'pageSize': pageSize},
success:function(result) {
console.log(result);
console.log(pno);
if (result.success) {
var count = result.total;
var data = result.rows;
totalRecords = count;
totalPage = Math.ceil(count / pageSize);
var datalist="";
$.each(data, function(i, item) {
datalist+='<tr>'+
'<td>'+item.uid+'</td>'+
'<td>'+item.username+'</td>'+
'<td>'+item.userpassword+'</td>'+
'</tr>';
});
$("#datalist1").html(datalist);
$('.total').text(totalPage);
$('.count').text(count);
$('.M-box').pagination({
pageCount: totalPage,
current:pno,//当前第几页
jump: true,
coping: true,
homePage: '首页',
endPage: '末页',
prevContent: '上页',
nextContent: '下页',
callback:PageClick
});
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('网络连接异常,请重试!')
}
});
}
//回调函数
PageClick = function(index){
$('.now').text(index.getCurrent());
loadList(index.getCurrent());//点击分页加载列表数据 */
}
});
</script>
</body>
</html>
后端:
写个分页拦截器用mybatis 分页插件进行分页
public class PageInterceptor extends HandlerInterceptorAdapter {
private static final Logger logger = LoggerFactory.getLogger(PageInterceptor.class);
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
throws Exception {
String pageNum = request.getParameter("pageNum");// 开始页数
String pageSize = request.getParameter("pageSize");// 每页行数
if (StringUtils.isNotBlank(pageNum) && StringUtils.isNotBlank(pageSize)) {
try {
PageHelper.startPage(Integer.parseInt(pageNum), Integer.parseInt(pageSize));
} catch (Exception e) {
logger.error(String.format("page分页拦截异常,原因:%s", e.getMessage()));
}
}
return true;
}
}
写个接口接收数据
public PageResult4EUjson(){
List<Users> list =usersService.getAllUsers();
logger.info("后端_用户分页显示");
return ResResult.ok(list).toPageResult();
}
效果图