Ajax异步刷新分页功能-MySQL

1.Servlet中代码

       /** 条件Map */
            Map<String, Object> map=new HashMap<String, Object>();
            
            /** 分页配置 */
            int index = request.getParameter("index")==null?1:Integer.parseInt(request.getParameter("index"));
            int size=2;
            map.put("index", (index-1)*size);
            map.put("size", size);
       /** 根据用户不同的请求进入不同的响应操作 */
            String method = request.getParameter("method");
            boolean mark=false;
            if(method!=null){
                if(method.equals("paging")){
                    /**执行分页操作 */
                    mark=true;
                }
            }
       /** 得到用户添加到购物车中的商品集合 */
            List<Entry> entrys = session.getMapper(EntryDao.class).selectUsEntry(map);
            if(mark){
                String entrysJson = JSONArray.fromObject(entrys).toString();
                out.print(entrysJson);
                return;
            }
            /** 得到总条数 算出总页数 */
            Integer entryCount = session.getMapper(EntryDao.class).entryCount(map);
            int totalPage=entryCount%size==0?entryCount/size:entryCount/size+1;
            /** 响应结果 */
            request.setAttribute("entrys", entrys);//得到用户的购物车
            request.setAttribute("totalPage", totalPage);//总条数
            
            /** 转发跳转 */
            request.getRequestDispatcher("page/crat_page.jsp").forward(request, response);

此为JSP的代码

 <body>
    <table id="ver-minimalist"   >
        <thead>
            <tr>
                <th>类别</th>
                <th>商品名字</th>
                <th>普通价格</th>
                <th>会员价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
        </thead>
     <tbody id="tbodyEntry" >
        <c:forEach items="${requestScope.entrys}" var="entry" >
            <tr>
                <td>${entry.commodity.variety.nickName }</td>
                <td>${entry.commodity.nickName }</td>
                <td>${entry.commodity.ordinaryPrice }</td>
                <td>${entry.commodity.memberPrice }</td>
                <td>${entry.quantity }</td>
                <td align="center">
                    <input type="button" value="删除" onclick="" />
                </td>
            </tr>
        </c:forEach>
    </tbody>
    <thead>
        <tr>
            <th colspan="6" align="right" ><input type="button" value="结算" onclick="" /></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="6" align="right"" width="30px" >
                    <input type="button" value="首页" id="firstpage" />
                    <input type="button" value="上页" id="beforepage" />
                    <input type="button" value="下页" id="nextpage" />
                    <input type="button" value="尾页" id="lastpage" />
                    <span id="index" >1</span><span id="totalPage" >${requestScope.totalPage}</span><!-- 此为当前页,与总页数 -->
            </td>
    </tr>
</tbody>

此为JQuerty的代码

            /** 全局变量 */
            var index = 1;
            var totalPage = 0;
            
            /** 分页窗体事件 */
            $(function () {
                /**取从Servlect中传到JSP页面的总条数信息 给全局变量totalPage 赋值
                 * 下为JSP页面中显示当前页和总页数
                 * <span id="index" >1</span><span id="totalPage" >${requestScope.senior.totalPage}</span> 
                 */
                totalPage=$("#totalPage").html();
                   //首页
                   $('#firstpage').click(function () {
                       if (index != 1) {
                           index = 1;
                           paging();/** 点击分页异步刷新函数 */
                       } 
                       return false;
                   });
                   //尾页
                   $('#lastpage').click(function () {
                       if (index != totalPage) {
                           index = totalPage;
                           paging();
                       }
                       return false;
                   });
                   //上一页
                   $("#beforepage").click(function () {
                       if (index != 1) {
                           index = index - 1;
                           paging();
                       }
                       return false;
                   });

                   //下一页
                   $("#nextpage").click(function () {
                       if (index < totalPage) {
                           index = index + 1;
                           paging();
                       }
                       return false;
                   });

               })

               /** 点击分页 */
             function paging(){
                 ajaxBase("cartPageServlet?method=paging","index="+index,"paging");
                 /** 给页面显示当前页赋值 */
                $("#index").html(index);
             }
            
            
            /** ajax函数工具类
              * @param url:地址
              * @param data:请求参数
              * @param method:方法信号,作用判断进行什么操作
              */
             function ajaxBase(url,data,method){
               $.ajax({
                   type:'post',
                    url:''+url+'',
                    cache:false,
                    data:data,
                    dataType:'text',
                    success:function(result){
                        alert("ajax函数工具类:success");
                        /** 调用请求成功后的操作函数 */
                        success(result,method);
                    },
                    error:function(){
                        alert("ajax函数工具类:error");
                    }
               });
             }
            
            
             /** 根据method方法信号判断进行什么操作 
              * @param result:服务端响应的数据
              * @param method:方法信号,作用判断进行什么操作
              */
            function success(result,method){
                if(method=="paging"){
                    $("#tbodyEntry").children().remove();
                    var result = eval("("+result+")");
                    var append="";
                    for(var rst in result){
                        append=append+""
                            +"<tr>"
                                +"<td>"+result[rst].commodity.variety.nickName+"</td>"
                                +"<td>"+result[rst].commodity.nickName+"</td>"
                                +"<td>"+result[rst].commodity.ordinaryPrice +"</td>"
                                +"<td>"+result[rst].commodity.memberPrice +"</td>"
                                +"<td>"+result[rst].quantity +"</td>"
                                +"<td align='center'>"
                                    +"<input type='button' value='删除' onclick='javascript:alert('执行删除操作:'"+result[rst].id +")' />"
                                +"</td>"
                            +"</tr>"
                    }
                    $("#tbodyEntry").append(append);
                }
            }
原文地址:https://www.cnblogs.com/wkrbky/p/5873500.html