使用ajax实现页面分页

分页 :

实现一个分页的步骤 :
服务器需要知道的有 :
每一页有多少数据 : pageSize // 可以自己设置每页显示多少数据
一共有多少数据 : totalRecord // 通过查询数据库获取 selece count(*) from xxx
当前页码 : pageNum // 通过浏览器传入
查询条件 : condition // 通过浏览器传入
浏览器需要知道的有 :
每一页的数据 : List＜T＞ list // 通过查询数据库获取
总页数 : totalPage // 总页数/每页数据量
显示多少分页 : howManyPages // 可以自己设置
当前页码 : pageNum // 通过自己传给后台,然后后天传回
开始页码 : start //
结束页码 : end //
数据库需要知道的有 :
每次查询多少数据 pageSize // 自己设置
从多少条数据开始查询 selectStart // (pageNum-1)*pageSize
查询条件 : condition // 通过浏览器传入

实现一个json的多条件组合查询
servlet :
1. 获取请求参数 : request.getParameter(“请求参数”);
2. 获取当前页码 : request.getParameter(“当前页码”);
3. 拼接查询条件 :
String[] a1 = {“条件1”,”条件2”,”条件3”,”条件4”};
String[] a2 = {“值1”,”值2”,”值3”,”值4”};
StringBuffer condition = new StringBuffer(“”);
if(值1 != null && !值1.equals(“”) || ……){
// 说明有查询条件拼接一个where
condition.append(” where “);
// 设置一个boolean值,用来在第二个条件中拼接and
boolean addAnd = false;
for(int i=0;i＜a2.length;i++){
if(a2[i]!=null && !a2[i].equals(“”)){
// 说明这个参数是查询条件
if(addAnd){
// 第一次时,addAnd 是false,进不来,之后可以进来,保证在第二个条件开始才有and
condition.append(” and “);
}
// 将条件=值传入
condition.append(a1[i]+”=”+”\’”+a2[i]+”\’”); // 这里需要写成条件 = ‘值’
}
}
}
4. 将当前页信息与sql语句传给service
5. 获得service返回的PageBean值
6. 将PageBean转换为json数据,传给前端

代码如下 :

package web;import domain.Book;
import domain.PageBean;
import net.sf.json.JSONObject;
import service.BookService;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebServlet(name = "BookService",urlPatterns = "/book")
public class BookServlet extends HttpServlet {private static BookService bookService = new BookService();private String bname;private String author;private String price;private String category;protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {bname = request.getParameter("bname");author = request.getParameter("author");price = request.getParameter("price");category = request.getParameter("category");String pc = request.getParameter("pc");String [] strings = {"bname","author","price","category"};String [] strings1 = {bname, author, price, category};StringBuffer sb = new StringBuffer("");if (isTrue()){sb.append(" where ");boolean showAnd = false;for (int i=0;i < strings1.length;i++) {if (strings1[i] != null && !strings1[i].equals("")) {if (showAnd) {sb.append(" and ");}sb.append(strings[i] + "=" +"\'"+ strings1[i]+"\'" + " ");showAnd=true;}}}PageBean<Book> pageBean = bookService.select(pc, sb.toString());
//        System.out.println(pageBean);JSONObject jsonObject = JSONObject.fromObject(pageBean);response.getWriter().write(jsonObject.toString());
//        response.sendRedirect("/index.html");}private boolean isTrue(){if (bname!=null && !bname.equals(""))return true;if (author!=null && !author.equals(""))return true;if (price!=null && !price.equals(""))return true;if (category!=null && !category.equals(""))return true;return false;}
}

service :
1. 获得servlet传入的pageNum和sql
2. 拼接查询语句 , 查询总数据量
String selectCount = “select count(*) from xxx”;
selectCount += sql;
3. 查询数据库,获取返回的数据条数 totalRecord
4. 创建PageBean对象,给初始值 totalRecord(总数据),pageNum(当前页),pageSize(每页显示的数据),howManyPages(多少页)
PageBean pageBean = new PageBean(totalRecord,pageNum,10,10);
在PageBean的构造方法中,计算出 start,end ….
5. 拼接查询语句 , 查询分页数据
String selectData = “select * from xxx”;
selectData += sql;
selectData += ” limit(“+pageBean.selectStart + “,”+pageBean.pageSize+”)”;
6. 通过sql语句,查询数据库,返回一个该对象的集合
7. 将该集合设置给pageBean
8. 将pageBean返回给servlet

代码如下 :

package service;import dao.BookDao;
import domain.Book;
import domain.PageBean;
import java.util.List;public class BookService {private static BookDao bookDao = new BookDao();public PageBean<Book> select(String pc,String sql) {int p = setPc(pc);String countSql = "select count(*) from book";countSql +=sql;Long aLong = bookDao.selectCount(countSql);Number number = aLong;int i = number.intValue();PageBean<Book> pageBean = new PageBean<>(p,10,i);sql+=" limit "+pageBean.getStartIndex()+","+pageBean.getPageSize();String bookSql = "select * from book";bookSql +=sql;List<Book> books = bookDao.selectBySql(bookSql);pageBean.setList(books);return pageBean;}private int setPc(String pc){if (pc == null){pc = "1";}else if (pc.equals("")){pc = 1+pc;}int p = Integer.parseInt(pc);return p;}
}

package service;

import dao.BookDao;
import domain.Book;
import domain.PageBean;
import java.util.List;

public class BookService {
private static BookDao bookDao = new BookDao();

public PageBean<Book> select(String pc,String sql) {int p = setPc(pc);String countSql = "select count(*) from book";countSql +=sql;Long aLong = bookDao.selectCount(countSql);Number number = aLong;int i = number.intValue();PageBean<Book> pageBean = new PageBean<>(p,10,i);sql+=" limit "+pageBean.getStartIndex()+","+pageBean.getPageSize();String bookSql = "select * from book";bookSql +=sql;List<Book> books = bookDao.selectBySql(bookSql);pageBean.setList(books);return pageBean;
}private int setPc(String pc){if (pc == null){pc = "1";}else if (pc.equals("")){pc = 1+pc;}int p = Integer.parseInt(pc);return p;
}

}

pageBean :
// 这些是外部传入的属性
private int pageNum; // 当前页
private int totalRecord; // 总数据条数
private int pageSize; // 每页显示的数据量
private int howManyPages; // 超链接有多少页
// 这些是计算得到的数据
private int totalPage; // 总页数
private int start; // 第一个分页应该是多少页
private int end; // 最后一个分页应该是多少页
private int selectStart; // 查询数据库应该从多少条查起
// 这个是查询数据库后设置的数据
private List＜T＞ list; // 保存查询到的数据

// 在构造方法中,初始化参数,设置计算数据
public PageBean(int totalRecord,int pageNum, int pageSize, int howManyPages){
// 初始化传入的参数
this.totalRecord = totalRecord;
this.pageNum = pageNum;
this.pageSize = pageSize;
this.howManyPages = howManyPages;
// 计算出总页数
if(totalRecord \% pageSize == 0){
// 说明整除
this.totalPage = totalRecord/pageSize;
}else{
// 否则,多余的数据,再开一页
this.totalPage = totalRecord/pageSize + 1;
}
/**
/* 计算start 和 end;
/* 一般,当前页在分页的中间
/* 所以 start = pageNum - middle; end = pageNum + middle(奇数);end = pageNum+middle-1(偶数)
*/
int middle = howManyPages/2;
start = pageNum - middle;
if(howManyPages\%2 == 0){
end = pageNum + middle - 1;
}else{
end = pageNum + middle;
}
if(start ＜ 1){
// 如果start ＜ 1 , 说明无法到,最中间
start = 1;
end = start+howManyPages-start;
}
if(end ＞ totalPage){
// 说明要到最后页了
end = totalPage;
start = end - howManyPages + 1;
}
// 还有一种特殊情况,当数据量不够分页的条目时
if(totalPage ＜ howManyPages){
start = 1;
end = totalPage;
}
// 数据库应该从多少条数据开始查询
// 查询10条第一页 0-9 第二页 10-19 第三页20-29; 可知 start = 当前页-1 * 每次查询多少
selectStart = (pageNum - 1)*pageSize;
}
// get/set方法

代码如下 :

public class PageBean<T>{
// 这些是外部传入的属性private int pageNum;         // 当前页private int totalRecord;     // 总数据条数private int pageSize;        // 每页显示的数据量private int howManyPages;    // 超链接有多少页// 这些是计算得到的数据private int totalPage;      // 总页数private int start;          // 第一个分页应该是多少页private int end;            // 最后一个分页应该是多少页private int selectStart;    // 查询数据库应该从多少条查起// 这个是查询数据库后设置的数据private List<T> list;       // 保存查询到的数据// 在构造方法中,初始化参数,设置计算数据public PageBean(int totalRecord,int pageNum, int pageSize, int howManyPages){// 初始化传入的参数this.totalRecord = totalRecord;this.pageNum = pageNum;this.pageSize = pageSize;this.howManyPages = howManyPages;// 计算出总页数if(totalRecord % pageSize == 0){// 说明整除this.totalPage = totalRecord/pageSize;}else{// 否则,多余的数据,再开一页this.totalPage = totalRecord/pageSize + 1;}/**/* 计算start 和 end;/* 一般,当前页在分页的中间/* 所以 start = pageNum - middle; end = pageNum + middle(奇数);end = pageNum+middle-1(偶数)*/int middle = howManyPages/2;start = pageNum - middle;if(howManyPages%2 == 0){end = pageNum + middle - 1;}else{end = pageNum + middle;}if(start < 1){// 如果start < 1 , 说明无法到,最中间start = 1;end = start+howManyPages-start;}if(end > totalPage){// 说明要到最后页了end = totalPage;start = end - howManyPages + 1;}// 还有一种特殊情况,当数据量不够分页的条目时if(totalPage < howManyPages){start = 1;end = totalPage;}// 数据库应该从多少条数据开始查询// 查询10条    第一页 0-9 第二页 10-19   第三页20-29; 可知 start = 当前页-1 * 每次查询多少selectStart = (pageNum - 1)*pageSize;}
}

js :
1. 获取请求参数
var url = location.search;
2. 访问servlet,获取json数据
function page(pageNum){
＄.get(“”,function(data,status)){ }
}
3. 获取List中的数据,遍历使用表格显示
var xxlist = data[list];
＄.each(xxlist,function(index,data)){ // 遍历显示}
4. 创建分页栏
// 使用for循环,从start到end
for(var i =data[“start”];i＜=data[“end”];i++){
// 显示
// 这里使用div,添加点击事件
click(function(){page(＄(this).text())})
}
5. 当前页特殊标记
// 到for循环里面
if(i = data[pageNum]){//特殊样式}
6. 上一页
// for循环前面
if(data[pageNum]＞1){// 上一页 page(data[pageNum] -1)}
7. 下一页
// for循环后面
if(data[pageNum]＜data[totalPage]){// 下一页 page(data[pageNum] +1)}
8. 跳页
// 下一页后面,使用js创建一个input和一个button
button点击事件
click(function(){page($(‘input’.val()))})

代码下面 :

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>书店详情</title><script src="/JS/jquery-3.2.1.min.js"></script><style type="text/css">a{text-decoration-line: none;font-size: 16px;margin: 2px}div{display: inline-block; height: 20px;width: 20px;border: 1px solid skyblue;margin: 2px;text-align: center}.div1{font-weight: bold;border: 0}.div2{width: 60px}.input{width: 30px}</style>
</head>
<body>
<table border="1"></table>
</body>
<script type="text/javascript">var url = location.search;console.log(url);xxx("");function xxx(pc) {$('tr').remove();$('div').remove();$('input').remove();$.get("/book"+url+pc,function (data, status) {console.log(data);console.log(status);if(status == "success"){var jsonData = $.parseJSON(data);var jsonDatum = jsonData["list"];console.log(jsonDatum);if (jsonDatum.length != 0){$('table').append($('<tr>').append($('<th>').text("bname")).append($('<th>').text("author")).append($('<th>').text("price")).append($('<th>').text("category")));$.each(jsonDatum,function (index, data) {$('table').append($('<tr>').append($('<td>').text(data["bname"])).append($('<td>').text(data["author"])).append($('<td>').text(data["price"])).append($('<td>').text(data["category"])))})}else{$('body').html("<a href='index.html'>没有数据,点击返回</a>")}if (jsonData["pageNum"] > 1){$('body').append($('<div>').attr({"class":"div2"}).text("上一页").click(function () {xxx(jsonData["pageNum"]-1)}))}for(var i=jsonData["start"];i<=jsonData["end"];i++){if (jsonData["pageNum"] == i){$('body').append($('<div>').attr({"class":"div1"}).text(i).click(function () {xxx($(this).text());}))}else{$('body').append($('<div>').text(i).click(function () {xxx($(this).text());}))}}if (jsonData["pageNum"] < jsonData["totalPage"]){$('body').append($('<div>').attr({"class":"div2"}).text("下一页").click(function () {xxx(jsonData["pageNum"]+1)}))}if (jsonDatum.length != 0) {$('body').append($('<input>').attr({"type": "text", "class": "input"})).append($('<div>').text("跳转").css({"width": "40px"}).click(function () {console.log($('.input').val());xxx($('.input').val())}))}}})}</script>
</html>

首页的html文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>index</title><script src="JS/jquery-3.2.1.min.js"></script>
</head>
<body><form action="book.html" method="get" id="tf">书名:<input type="text" name="bname"><br>作者:<input type="text" name="author"><br>价格:<input type="text" name="price"><br>分类:<input type="text" name="category"><br><input type="hidden" name="pc" value=""><input type="submit" value="提交"></form>
</body></html>

使用ajax实现页面分页相关推荐

php页面自分页刷新,详解PHP+AJAX无刷新分页实现方法
PHP+AJAX无刷新分页实现代码详解,最近在看ajax 教程,就想写个简单入门的PHP+AJAX无刷新分页,我们依据ajax开发框架,代码如下: var http_request=false; fu ...
ajax 更新页面变量,[Django 1.5] jQuery/Ajax 在Django使用，如何更新模板里里变量
最近希望实现一个页面局部刷新的功能,于是开始查阅ajax资料.幸好现在ajax很多功能都封装在jQuery这个库里面,我们可以很方便去调用.通过学习几个简单的小例子,可以实现简单的前端代码更新,还有重 ...
thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
tp5的ajax搜索后分页,修改TP5的分页类使之Ajax分页有效
Thinkphp 5.1采用Ajax分页后,首页自然不是问题,但是后续的页面链接仍然指向原地址:虽然可以取回数据,但是没有样式的渲染--因为此时的页面只有"一部分"本身就没有CSS ...
产品ajax无刷新kesion,科讯商业版中用到的ajax空间与分页函数
科讯商业版中用到的ajax空间与分页函数更新时间:2007年09月02日 22:02:32 作者: 科讯sql商业版中用到的ajax空间与分页函数,他们的js代码学习是非常不错的 //ajax ...
IntelliJ IDEA中ajax开发实现分页查询
此文章的图片被简书禁止访问了, 可以上简书查看此文章. 链接如下 https://www.jianshu.com/p/1fd6b39e98ac IntelliJ IDEA中ajax开发实现分页查询文 ...
java ajax无刷分页_简单实现Ajax无刷新分页效果
Ajax无刷新分页效果,如下代码实现 Ajax无刷新分页效果 function showpage(url) { var xhr = new XMLHttpRequest(); xhr.onreadys ...
AJAX实现页面选项卡、隔行换色、弹出层功能代码
代码简介:AJAX实现页面选项卡.隔行换色.弹出层功能代码代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
html5新特性：利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题
html5新特性:利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题参考文章: (1)html5新特性:利用history的pushState等方法来解决使用aj ...

使用ajax实现页面分页

使用ajax实现页面分页相关推荐

最新文章

热门文章