Ajax异步刷新分页功能-MySQL

Posted 2020-08-09

此为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("varietyManyServlet?method=paging","index="+index,"inTurn");
                 /** 给页面显示当前页赋值 */
                $("#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=="inTurn"){
                    /**
                     * 动态添加EasyUI 中数据
                     */
                    $(‘#MyTable‘).datagrid(‘loadData‘,{total:0,rows:[]});//清空datagrid中所有的数据，！不包括field列名
                    var data=eval("("+result+")");//转换响应的Json数据
                    //遍历Json集合 动态追加表格数据。--两种遍历方式。
                    for(var machine in data){
                        var row_data={
                                box:‘<input type="checkbox" />‘, 
                                nickName: data[machine].nickName,
                                ordinaryPrice: data[machine].ordinaryPrice,
                                memberPrice: data[machine].memberPrice,
                                quantity: data[machine].sale.quantity,
                                grade: data[machine].commentss[0].grade,
                                path: "<img alt="+data[machine].nickName+" src=‘upload/"+data[machine].path+"‘ width=‘110px‘ height=‘100px‘ >",
                                add:‘<a name="show"  onclick="showDetail(‘+data[machine].id+‘)" >查询详情</a>‘
                                    +‘<a name="check"  onclick="checkLgoin(‘+data[machine].id+‘,‘+$("input[name=checkHidden]").val()+‘)" >加入购物车</a>‘
                        };
                        $("#MyTable").datagrid(‘appendRow‘,row_data);
                    }