layui-laypage后端分页
本项目为SSM项目，本示例始终使用layui后端分页时，需要返回总条数totalCount、当前页page，当前页条数limit
一、contraller代码
@RequestMapping(value = "/getInfo", method = RequestMethod.POST)
public void inborrowInfo(HttpSession session, HttpServletRequest request, HttpServletResponse response)
throws IOException {
Map<String, Object> map = new HashMap<String, Object>();
String page = request.getParameter("page");// 当前页
String size = request.getParameter("size");// 条数
int pages = Integer.parseInt(page);
int rows = Integer.parseInt(size);
int pageIndex = (pages - 1) * rows;
map.put("page", pageIndex);// 起始条数
map.put("size", rows);// 每页条数
// 查询总数
int count = infoService.selectCount(map);
if (count > 0) {
// 查询内部借阅信息
List<Info> info = infoService.selectInfo(map);
Map<String, Object> result = new HashMap<String, Object>();
result.put("info", info);
result.put("totalCount", count);
result.put("page", pages);
result.put("limit", rows);
//返回数据
writeJSON(response, result);
} else {
writeJSON(response, "fail");
}
}二、jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<meta charset="UTF-8">
<title>title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/qwjs.css"/>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/layui/css/layui.css"/>
head>
<body style="padding:0 24px">
<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>
<input type="hidden" id="currPage" value="1">
<input type="hidden" id="limit" value="10">
<script src="<%=request.getContextPath()%>/js/jquery-1.11.3.js">script>
<script src="<%=request.getContextPath()%>/layui/layui.all.js">script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/infoPage.js">script>
body>
html>三、info.js脚本
$(document).ready(function(){
//ajax请求后台数据
studentInfo();
toPage();
});
//请求数据
function studentInfo(){
var realName = $("#realName").val();//借阅人
var page=$("#currPage").val();
var size=$("#limit").val();
$.ajax({
type:"post",
url:"getInfo",//对应controller的URL
async:false,
dataType: 'json',
data:{
"page":page,
"size":size,
},
success:successFunction
});
}
//数据请求成功
function successFunction(data){
console.log(data);
$("#tbody").html("");
$("#currPage").val(data.page);//重新赋值当前页
$("#limit").val(data.limit);//重新赋值本页条数
var page=data.page;
var limit=data.limit;
total=data.totalCount;
if(data.success=="fail"){//当前无数据时
$("#tbody").html("
暂无数据");
return;
}
var list = data.extBorrowerInfo;
var titles = "姓名 年级 联系电话 '+list[j].userName+' ';
tr+=''+list[j].grade+' ';
tr+=''+list[j].phoneNum+' 四、页面效果图
