在前篇博文中，博主完成了ajax联动选择的小Demo，今天，给大家分享的是使用ajax来实现条件与分页查询，先看效果图：
对比一个我之前写的分页条件查询，使用的只是Servlet返还request来实现检索，其页面明显需要一个刷新操作，且由于页码与条件需要处理才能同时作为参数传入，很不方便。因此，这个使用ajax的条件分页查询便较为友好了。而且这个页码写法可以移植到所有的管理页码，下面，介绍这个小Demo的开发步骤：
项目目录结构如下：
1.创建相应的工具类，像数据库连接，分页的工具类：
DBUtil.java 完成返还分页查询结果：
public Page getQueryPage(Class<?> type, String sql,Object[] params,Page page){
int totalPages = 0; //页数
Long rows = 0l;//数据记录数
//分页工具类
List<Class<?>> list = null;
Map countMap = null;
try {
list = this.getQueryList(type,sql
+ " limit "
+ (page.getCurPage()-1)*page.getPageNumber()
+" , "+page.getPageNumber(),params);
countMap = this.getObject(" "
+ "select count(*) c from ("+ sql +") as t ", params);
rows = (Long)countMap.get("c");
//求余数
if(rows % page.getPageNumber() ==0){
totalPages = rows.intValue() / page.getPageNumber();
}else{
totalPages = rows.intValue() / page.getPageNumber() + 1;
}
page.setRows(rows.intValue());
page.setList(list);
page.setTotalPage(totalPages);
}catch(Exception e){
e.printStackTrace();
}
return page;
}
Page类的定义：
public class Page {
//每页显示的条数
private int pageNumber=5;
//当前页
private int curPage;
//总条数
private int rows;
//总页数
private int totalPage;
//要现实的list
private List list=new ArrayList();
public int getPageNumber() {
return pageNumber;
}
public void setPageNumber(int pageNumber) {
this.pageNumber = pageNumber;
}
public int getCurPage() {
return curPage;
}
public void setCurPage(int curPage) {
this.curPage = curPage;
}
public int getRows() {
return rows;
}
public void setRows(int rows) {
this.rows = rows;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public List getList() {
return list;
}
public void setList(List list) {
this.list = list;
}
@Override
public String toString() {
return "Page [pageNumber=" + pageNumber + ", curPage=" + curPage + ", rows=" + rows + ", totalPage=" + totalPage
+ ", list=" + list + "]";
}
}
JSON转换：我们在数据查询时，使用的是JSON的数据格式，因此需要进行转换。
在这里我们在封装JSON数据时为避免出错，所以并不是手动封装，而是使用了相关的jar包来实现，我使用的是阿里云的共享jar包:
fastjson-1.2.62.jar
项目所需的jar包
public class JsonUtil {
/*
* 把对象转换为JSON的工具方法
*/
public static String ObjectRoJsonString(Object obj){
return JSON.toJSONString(obj, true);
}
}
接下来，便是MVC设计模式中的开发步骤了：
2.三层架构开发
BookServlet.java
private void findBooks(HttpServletRequest request,
HttpServletResponse response) throws IOException {
// TODO Auto-generated method stub
PrintWriter out=response.getWriter();
String curPage=request.getParameter("curPage");
String bookname=request.getParameter("bookname");
int curpagestr=1;
if("".equals(curPage)||curPage.equals(null)||curPage==null){
curpagestr=1;
}else{
curpagestr=Integer.parseInt(curPage);
}
//把当前页码赋值给Page的curpage属性
Page page=new Page();
page.setCurPage(curpagestr);
//调用Service分页查询方法
page=bookservice.getBookAll(page,bookname);
String jsonString=JsonUtil.ObjectRoJsonString(page);
System.out.println(jsonString);
out.write(jsonString);
out.flush();
out.close();
}
BookServiceImpl.java
public class BookServiceImpl implements BookService{
BookDao bookdao=new BookDaoImpl();
@Override
public Page getBookAll(Page page,String bookname) {
// TODO Auto-generated method stub
return bookdao.getBookAll(page,bookname);
}
}
BookDaoImpl.java
public class BookDaoImpl implements BookDao{
DBUtil dbutil=new DBUtil();
public Page getBookAll(Page page,String bookname) {
// TODO Auto-generated method stub
String sql="select books.id id,books.name name,info,types.name typename,bookDate from books inner join types on types.id=books.typeid where books.name like '%"+bookname+"%'";
Page page1=null;
page1 = dbutil.getQueryPage(Book.class, sql, null, page);
return page1;
}
}
3.jsp页面编辑：
这是html的表格设计
<form id="data_form" method="post">
输入书籍: <input type="text" value="" name="bookname">
<input type="button" value="检索" onclick="queryList()">
</form>
<br>
<div class="result-content">
<table class="result-tab" width="70%" id="books">
<tr>
<th>标签ID</th>
<th>书籍名称</th>
<th>书籍类别</th>
<th>展示图片</th>
<th>发布时间</th>
</tr>
</table>
由于是ajax查询方式，需要在页面上进行刷新追加，因此需要实现ajax请求的函数：
function queryList(){
//定义表单创化的数据
var formData=$("#data_form").serialize();
//alert(formData);
//定义 传送的参数
var parm="curPage="+curPage+"&&action=findBook&&"+formData;
//发送ajax请求
$.ajax({
dataType:"json",//返还的数据类型
type:"post",//提交方式，post更安全
url:"${basePath}/BookServlet?"+parm,//url请求路径
data:{
curPage:curPage},//参数
success:function(data){
//查询成功后执行的操作
//调用填充数据的函数
fillData(data);
fillFooter(data);
},
error:function(){
alert("请求错误");
}
});
}
在上一个函数中，在查询数据成功后需要进行数据信息追加到页面中并且将页码加入，分别调用了 fillData() 与 fillFooter()两个函数
填充表格
**//定义填充表格数据的函数**
function fillData(data){
//获取json中list属性对应值[json数组]
$dataTable.find("tr:gt(0)").remove();//清除
var books=data.list;
for(var i=0;i<books.length;i++){
var book=books[i];
var id=book.id;
var name=book.name;
var typen=book.typename;
var info=book.info;
var booktime=book.bookDate;
//构建行的Juery对象
var $tr=$("<tr><td>"+id+"</td><td>"+name+"</td><td>"+typen+
"</td><td><img src='${basePath}/admin/img/"+id%5+".jpg' width=40 height=50></td><td>"+booktime+"</td></tr>");
//把构建的行追加到表格中
$dataTable.append($tr);
}
}
填充分页
function fillFooter(data){
var $tr="<tr><td colspan=5>总共"+data.totalPage+"页 共"+data.rows+"条数据 当前第"+data.curPage+"页"
+"<a href='javascript:_first();'> 首页 </a>"
+"<a href='javascript:_pre();'> 上一页 </a>"
+"<a href='javascript:_next("+data.totalPage+");'> 下一页 </a>"
+"<a href='javascript:_last("+data.totalPage+");'> 尾页 </a>"
+"</td></tr>";
$dataTable.append($tr);
}
然后对页码进行操作
function _first(){
curPage=1;
queryList();
}
function _pre(){
curPage=curPage-1<1?1:curPage-1;
queryList();
}
function _next(totalPages){
curPage=curPage+1>totalPages?totalPages:curPage+1;
queryList();
}
function _last(totalPages){
curPage=totalPages;
queryList();
}
最终只要调用queryList()函数就可以了
码字不易，给个赞呗