废话不多说,先看效果图!
直接上代码:
前端页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>分页测试</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" href="fpage/layui/css/layui.css" media="all">
<script src="fpage/layui/layui.all.js" charset="utf-8"></script>
<script src="fpage/layui/lay/modules/laypage.js" charset="utf-8"></script>
<script src="components/plugin/jquery/jquery-1.6.0.js" charset="utf-8"></script>
<script>
$(document).ready(function(){
//表格初始化
$.ajax({
type:"post",
url:"SingerController/getInfo.do",//对应controller的URL
success:function(json){
var total=json;
initFPage(total);
}
});
})
//分页器
function initFPage(total){
layui.use('laypage', function(){
var laypage = layui.laypage;
laypage.render({
elem: 'page', //注意,这里的 page 是 ID,不用加 # 号
//数据总数,从服务端得到
limits:[10,20,30,40,50],
prev:"<<",
next:">>",
theme:"#0099ff",
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
count:total,//总记录数
curr:1,//初始化选中的页码
limit:10,//每页显示记录数
jump:function(layinit){
$.ajax({
type:"post",
url:"SingerController/getInfo222.do",//对应controller的URL
data:{
"page":layinit.curr,//当前页码
"size":layinit.limit},//请求每页数据记录数;
success:function(json){
var list=json;
//初始化table页面
var tr="";
for(var j=0;j < list.length;j++){
tr+='<td>'+list[j].singerName+'</td>';
}
$("#tbody").html(tr);
}
});
}
});
});
}
</script>
</head>
<body>
<div class=" table-second">
<div class="table-container">
<table class="layui-table" id="initInfo">
<thead id="thead">
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</div>
<div id="page" style="text-align:right"></div>
</body>
</html>
控制层:
package com.hgs.amusicweb.controller;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import com.hgs.amusicweb.biz.SingerBiz;
import com.hgs.amusicweb.pojo.SingerPojo;
//歌手页面
@Controller
@RequestMapping("/SingerController")
public class SingerController {
@Autowired
private SingerBiz singerBiz;
@RequestMapping(value = "/getInfo")
public void inborrowInfo(,HttpServletResponse response)
throws IOException {
//查询总记录数
response.getWriter().print(singerBiz.queryCount());
}
@RequestMapping(value = "/getInfo222")
public void inborrowInfo(Integer page,Integer size,HttpServletResponse response)
throws IOException {
if(page!=null&&size!=null){
//查询当前页记录数据
List<SingerPojo> querySingerListLimit = singerBiz.querySingerListLimit(page,size);
JSONArray json = JSONArray.fromObject(querySingerListLimit );
response.getWriter().print(json);
}
}
}
后面的代码就只能靠自己了,哈哈。