ajax 分页

package cn.easy.util;

 
    /**
     * 分页的工具类
     */
    public class PageUtil {
        private int totalCount;// 总记录数 通过sql从数据库中获取
        private int pageSize = 3;// 页大小 每页显示的条数
        private int pageCount;// 总页数
        private int pageIndex;// 当前页

        public int getTotalCount() {
            return totalCount;
        }

        /**我们在获取总记录数之后，肯定可以得出 总页数
         * 001.总记录数通过sql从数据库中获取
         * 002.三元表达式 进行判断 并赋值总页数pageCount
         * 
         * 总页数=(总记录数%页大小==0)?(总记录数/页大小):(总记录数/页大小+1);
         * 
         * @param totalCount 总记录数
         */
        public void setTotalCount(int totalCount) {
            if (totalCount > 0) {
                this.totalCount = totalCount;
                this.pageCount = (totalCount % pageSize == 0) ? (totalCount / pageSize)
                        : (totalCount / pageSize + 1);// 总页数
            }
        }

        public int getPageSize() {
            return pageSize;
        }

        public void setPageSize(int pageSize) {
            this.pageSize = pageSize;
        }

        public int getPageCount() {
            return pageCount;
        }

        public void setPageCount(int pageCount) {
            this.pageCount = pageCount;
        }

        public int getPageIndex() {
            return pageIndex;
        }

        public void setPageIndex(int pageIndex) {
            this.pageIndex = pageIndex;
        }

        public PageUtil(int totalCount, int pageSize, int pageCount, int pageIndex) {
            super();
            this.totalCount = totalCount;
            this.pageSize = pageSize;
            this.pageCount = pageCount;
            this.pageIndex = pageIndex;
        }

        public PageUtil() {
            super();
        }

        @Override
        public String toString() {
            return "PageUtil [totalCount=" + totalCount + ", pageSize=" + pageSize
                    + ", pageCount=" + pageCount + ", pageIndex=" + pageIndex + "]";
        }

     

}

    @Override
    public int totalCount() {
         String sql="select count(1) as count from easybuy_product" ;
         int count=0;
         try {
            ResultSet rs = executeQuery(sql);
            
            if(rs.next()){
                 count= rs.getInt("count"); 
                  if(count>0){
                      System.out.println("...");
                  }
            }
        } catch (ClassNotFoundException e) {
             
            e.printStackTrace();
        } catch (SQLException e) {
             
            e.printStackTrace();
        }
        return count;
    }
 

  

package cn.easy.servlet.product;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

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 org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import com.google.gson.Gson;

import cn.easy.been.Product;
import cn.easy.service.impl.product.ProductServiceImpl;
import cn.easy.service.product.ProductService;
import cn.easy.util.PageUtil;
@WebServlet("/ProductServlet")
public class ProductServlet extends HttpServlet{

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response )
            throws ServletException, IOException {
            ProductService service=new ProductServiceImpl();
            String action = request.getParameter("action");
            PageUtil util=new PageUtil();
            util.setTotalCount(service.totalCount());
            System.out.println("得到的总记录数"+service.totalCount());
            System.out.println("总页数："+util.getPageCount());
            System.out.println("总记录数"+util.getTotalCount());
            String pageIndex=  request.getParameter("pageIndex")  ;
            System.out.println("pageIndex===="+pageIndex);
            if(pageIndex ==null|| pageIndex.equals("")){
                util.setPageIndex(1);
             }else{
                 util.setPageIndex(Integer.parseInt(pageIndex))  ;
             }
            try {
                List<Product> list = service.findAllByPage(util);
                System.out.println("list=========Servlet"+list);
                if(list!=null){
                    // 把分页的工具类对象页得放进作用域中
                     request.setAttribute("pageUtil", util);
                     list.get(0).setPageUtil(util);
                    // 创建Gson
                     Gson gson=new Gson();
                    // 需要把pageUtil放进集合第一个对象中
                     String json = gson.toJson(list);
                     PrintWriter writer = response.getWriter();
                     response.setHeader("Content-type", "text/html;charset=utf-8");
                     writer.print(json);
                     System.out.println(json);
                     writer.close();
                }else{
                    System.out.println("出现异常");
                }
            } catch ( Exception e) {
                e.printStackTrace();
            } 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="css/pintuer.css">
<link rel="stylesheet" href="css/admin.css">
<script src="js/jquery.js"></script>
<script src="js/pintuer.js"></script>
</head>
<body>
<form method="post" action="" id="listform">
  <div class="panel admin-panel">
    <div class="panel-head"><strong class="icon-reorder"> 商品列表</strong> <a href="" style="float:right; display:none;">添加字段</a></div>
    <div class="padding border-bottom">
      <ul class="search" style="padding-left:10px;">
        <li> <a class="button border-main icon-plus-square-o" href="product/add.jsp"> 添加商品</a> </li>
 
        <li>
          <input type="text" placeholder="请输入搜索关键字" name="keywords" class="input" style="250px; line-height:17px;display:inline-block" />
          <a href="javascript:void(0)" class="button border-main icon-search" onclick="changesearch()" > 搜索</a></li>
      </ul>
    </div>
    <table class="table table-hover text-center">
      <tr>
        <th   style="text-align:left; padding-left:20px;">id</th>
        <th>商品名称</th>
        <th>商品描述</th>
        <th>商品价格</th>
        <th>商品库存</th>
        <th>一级分类id</th>
        <th>二级分类id</th>
        <th>三级分类id</th>
        <th>上传的文件名 </th>
        <th>是否删除</th>
        <th width="310">操作</th>
         </tr>
         <%--  <c:forEach var="p" items="${list}" >
         <tr>
          <td style="text-align:left; padding-left:20px;"><input type="checkbox" name="id[]" value="hahha" />
          ${p.id}</td>
          <td><input type="text" name="sort[1]" value="${p.name}" style="50px; text-align:center; border:1px solid #ddd; padding:7px 0;" /></td>
          <td > ${p.description}</td>
          <td>${p.price}</td>
          <td><font color="#00CC99">${p.stock}</font></td>
          <td>${p.categoryLevel1Id}</td>
          <td> ${p.categoryLevel2Id}</td>
          <td> ${p.categoryLevel3Id}</td>
          <td> ${p.fileName}</td>
          <td> ${p.isDelete}</td>
          <td><div class="button-group"> 
          <a class="button border-main" href="product/update.jsp"><span class="icon-edit"></span> 修改</a>
           <a class="button border-red" href="ProductServlet?action=del&id=${p.id}"   >  
         <span class="icon-trash-o"></span>删除</a> 
         </td>
        </tr>
        </c:forEach>
           --%>
          <tr>
       
      <tbody id="tbody">
      
      </tbody>
      
    </table>
  </div>
    
 <!-- 创建分页使用的隐藏域  当前页-->
 <input type="hidden" name="pageIndex">
    <nav aria-label="Page navigation">
     <ul class="pagination">
        <li><a href="javascript:"    id="one">首页</a></li>
         <li><a href="javascript:"    id="back">上一页</a></li>
         <li><a href="javascript:"    id="next">下一页</a></li>
         <li><a href="javascript:"    id="last">尾页</a></li>
       </ul>
       </nav>
</form>

   <!-- 模态窗口  -->
 <!-- <div class="modal hide fade" id="myModal">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal">×</button>
                 <h3>确认删除</h3>
             </div>
             <div class="modal-body">
                 <p>是否删除本条新闻...</p>
             </div>
             <div class="modal-footer">
             隐藏域 
                <input  type="hidden" id="url">
                 <a href="#" class="btn" data-dismiss="modal">取消</a>
                 <a href="#" onClick="delSubmit()" class="btn btn-primary">删除</a>
             </div>
         </div>  --> 
 <!--   关于 模态窗口的 js  -->
  <!--       <script type="text/javascript">
         
          function  del(delUrl){
          //给隐藏域赋值
          $("#url").val(delUrl);
          $("#myModal").modal("show");         
          }
       
       
       //模态窗口中的真正删除
       function  delSubmit(){
        window.location.href= $("#url").val();
       }
 </script>  -->
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">

/* Ajax分页 */
  $(function(){
     //分页的四要素
     var pageIndex="";//当前页
     var pageSize="";//页大小
     var TotalPageCount="";//总页数
     var totalCountSize ="";//总记录数
     //用户第一次打开这个list.jsp页面什么数据都没有！ 但是必须得有！！！访问后代数据库
     pageInit(pageIndex); // 初始化数据
 
      
  function  pageInit(pageIndex){
          $("#one").show();
          $("#back").show();
          $("#next").show();
          $("#last").show();//第一次显示所有的超链接
         alert(pageIndex);
          //使用ajax 访问servlet
          $.ajax({
             url:"ProductServlet",
             type:"POST",
             data:{"pageIndex":pageIndex},//把用户传递的当前页 发送给后台servlet
             dataType:"json",
             contentType:"application/x-www-form-urlencoded;charset=utf-8",
             success:callback//调用会调函数
          });}
          
          
          
         function callback(data){
             
            
             $("#tbody").html("");
             $(data).each(function(){
                 if(this.util!=null){
                     //alert("页数"+this.util.pageIndex);
                     pageIndex=this.util.pageIndex;
                     pageSize=this.util.pageSize;
                     TotalPageCount=this.util.pageCount;
                     totalCountSize=this.util.totalCount;
                 }
     
                 $("#tbody").append("<tr><td style= 'text-align:left; padding-left:20px;'><input type='checkbox' name='id[]'value='hahha' />"+this.id+"</td>     "
                + "                                                                                                                                              "
                + "<td><input type='text' name='sort[1]' value='"+this.name+"' style='50px; text-align:center; border:1px solid #ddd; padding:7px 0;' /></td>  "
                + "<td>"+this.description+"  </td>                                                                                                                       "
                + "<td>"+this.price+"</td>                                                                                                                           "
                + "<td><font color='#00CC99'>"+this.stock+"</font></td>                                                                                              "
                + "<td>"+this.categoryLevel1Id+"</td>                                                                                                                "
                + "<td>"+this.categoryLevel2Id+"</td>                                                                                                               "
                + "<td>"+this.categoryLevel3Id+"</td>                                                                                                               "
                + "<td>"+this.fileName+"</td>                                                                                                                       "
                + "<td>"+this.isDelete+"</td>                                                                                                                       "
                + "<td><div class='button-group'>                                                                                                                "
                + "<a class='button border-main' href='product/update.jsp'><span class='icon-edit'></span> 修改</a>                                              "
                + "<a class='button border-red' href='ProductServlet?action=del&id="+this.id+" /* href='#' onClick='del('delServlet?id="+this.id +"') */'>      "
                + "<span class='icon-trash-o'></span>删除</a></td></tr>                                                                                          "
                                                                                                                                                                 
                 );
                });  // each 
             } // call back
         $("#one").click(function(){//首页
              pageInit(1);
           });
           $("#last").click(function(){
               pageInit(TotalPageCount);//尾页
           });
           $("#back").click(function(){//上一页
             if((pageIndex-1)>0){
                 pageInit(pageIndex-1);
             } else{
                 $("#one").hide();
                 $("#back").hide();
             } 
           });
           
           $("#next").click(function(){//下一页
               if((pageIndex+1)<TotalPageCount){
                   pageInit(pageIndex+1);
               }else{
                   $("#last").hide();
                   $("#next").hide();
               }
               
               
           });

  }
  );
  
</script>
</body>
</html>