分页,既能提升用户体验,又减少页面体积,提升加载速度。Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。那怎么实现用ajax进行分页查询呢?
实现图:
工具类:
package com.baibu.utils;
public class PageUtil {
private Integer prevPage=0;
private Integer nextPage=0;
private Integer lastPage=0;
private Integer pageSize;
private Integer counter;
private Integer currentPage=0;
public PageUtil(Integer pageSize,Integer counter,String page) {
this.pageSize=pageSize;
this.counter=counter;
if (page ==null) {
page="1";
}
currentPage=Integer.parseInt(page);
initLastPage();
initPrevPage();
initnextPage();
}
private void initnextPage() {
// TODO Auto-generated method stub
nextPage=currentPage==lastPage?lastPage:currentPage+1;
}
private void initPrevPage() {
// TODO Auto-generated method stub
prevPage=currentPage==1?currentPage:currentPage-1;
}
private void initLastPage() {
lastPage=counter/pageSize;
if (counter%pageSize !=0) {
lastPage+=1;
}
}
public Integer getPrevPage() {
return prevPage;
}
public void setPrevPage(Integer prevPage) {
this.prevPage = prevPage;
}
public Integer getNextPage() {
return nextPage;
}
public void setNextPage(Integer nextPage) {
this.nextPage = nextPage;
}
public Integer getLastPage() {
return lastPage;
}
public void setLastPage(Integer lastPage) {
this.lastPage = lastPage;
}
public Integer getCurrentPage() {
return currentPage;
}
public void setCurrentPage(Integer currentPage) {
this.currentPage = currentPage;
}
public Integer getPageSize() {
return pageSize;
}
public void setPageSize(Integer pageSize) {
this.pageSize = pageSize;
}
public Integer getCounter() {
return counter;
}
public void setCounter(Integer counter) {
this.counter = counter;
}
}
编写回调函数:
但在编写回调函数之前,要先导包:
<script type="text/javascript">
$(function() {
$.ajax({
url:"pageServlet",
type:"post",
data:"",
dataType:"json",
success:function(obj){
// alert(obj[1][0].name+","+obj[1][1].name);
for (var i = 0; i < obj[1].length; i++) {
var h="";
h +="<tr class='pb'><td>"+obj[1][i].id+"</td><td>"+obj[1][i].name+"</td></tr>";
//获取内容;
$("#pa").append(h);
}
//$("#pa").html(h);
$("#but2").val(obj[0].prevPage);
$("#but3").val(obj[0].nextPage);
$("#but4").val(obj[0].lastPage);
}
});
});
//上面这一步是为了获取第一页内容,
function fy(obj){
$.ajax({
url:"pageServlet",
type:"post",
data:{
page:obj
},
dataType:"json",
success:function(obj){
$(".pb").remove();//删除内容;
// alert(obj[1].length);
for (var i = 0; i <obj[1].length; i++) {
var h="";
h +="<tr class='pb'><td>"+obj[1][i].id+"</td><td>"+obj[1][i].name+"</td></tr>";
//$("#pa").append(h);
//$("#pa").append(h);
$("#pa").append(h);
}
//$("#pa").html(h);//输出内容;
$("#but2").val(obj[0].prevPage);
$("#but3").val(obj[0].nextPage);
$("#but4").val(obj[0].lastPage);
}
});
}
// 这一步是为了,获取下一页内容和删除上一页内容。
</script>
<body>
<div >
<table id="pa" border="3">
<tr id="xx">
<th>id</th>
<th>name</th>
<!-- <th><ahref="<%=request.getContextPath() %>/page.jsp"></a></th> -->
</tr>
</table>
<table>
<tr>
<td>
<button id="but1" class="but" value="首页" οnclick="fy(1)">首页</button>
<button id="but2" class="but" value="上一页" οnclick="fy(this.value)">上一页</button>
<button id="but3" class="but" value="下一页" οnclick="fy(this.value)">下一页</button>
<button id="but4" class="but" value="尾页" οnclick="fy(this.value)">尾页</button>
</td>
</tr>
</table>
</div>
</body>
//上面这一步是为了建立表格,以上内容属于前端
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json;charset=UTF-8");
String page=request.getParameter("page");
if (null==page) {
page="1";
}
PageUtil pageUtil=new PageUtil(2, pageDao.getCounter(), page);
List<AA> list=pageDao.getAAListWithPage((pageUtil.getCurrentPage()-1)*2, 2);
request.setAttribute("list", list);
request.setAttribute("pageUtil", pageUtil);
List<Object> arraylist = new ArrayList<>();
arraylist.add(pageUtil);
arraylist.add(list);
String string = JSON.toJSONString(arraylist);
System.out.println(string);
response.getWriter().write(string);
//这是数据控制层的代码: 整个项目的控制器
public List<AA> getAAListWithPage(Integer i, Integer j) {
// TODO Auto-generated method stub
List<AA> list=new ArrayList<AA>();
Connection connection=null;
PreparedStatement pst=null;
ResultSet rs=null;
String sql="select * from aa limit ?,? ";//即取出从第i行数据(不算第i行)至j+i+1条,共4条记录
try {
connection=JDBCUtil.getConnection();
pst=connection.prepareStatement(sql);
pst.setInt(1, i);
pst.setInt(2, j);
rs=pst.executeQuery();
AA aa=null;
while(rs.next()) {
aa=new AA(rs.getInt(1),rs.getString(2));
list.add(aa);
}
} catch (SQLException e) {
// TODO: handle exceptio n
e.printStackTrace();
}finally {
JDBCUtil.close(rs, pst, connection);
}
for (AA aa : list) {
System.out.println(aa);
}
return list;
}
@Override
public Integer getCounter() {
// TODO Auto-generated method stub
Integer counter=0;
Connection connection=null;
PreparedStatement pst=null;
ResultSet rs=null;
String sql="select count(*) from aa";//共有几条数据;
try {
connection=JDBCUtil.getConnection();
pst=connection.prepareStatement(sql);
rs=pst.executeQuery();
if(rs.next()) {
counter=rs.getInt(1);
}
} catch (SQLException e) {
// TODO: handle exception
e.printStackTrace();
}finally {
JDBCUtil.close(rs, pst, connection);
}
return counter;
}
//这是数据处理层的代码
// 以上就是全部代码,如有疑问我会回复。