ajax分页封装

最新推荐文章于 2018-07-25 11:50:17 发布

zhuxiangyu2012

最新推荐文章于 2018-07-25 11:50:17 发布

阅读量696

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.csdn.net/zhuxiangyu2012/article/details/24036087

javascript 专栏收录该内容

14 篇文章

订阅专栏

/*
       1.需要一个与用户自定义实现做交互的方法，这个方法负责后续所有的操作，如更新分页栏

       2.分页按钮需要一个特定的函数来触发查询

       3.要记录当前页数

       4.跳转到特定页数

       5.pageSize的改变

       6.最好去掉include
       */

       //第几页
       var ajax_pageIndex = 1;
       //页数
       var ajax_pageCount = 0;
       //每页多少条
       var ajax_pageSize = 1;
       //最后一页
       var ajax_pageLast = 0;
       //一共多少条数据
       //var ajax_pageRowCount = 0;
       //用户ajax回调函数名称
       var ajax_processFunc="";
       //ajax请求基本路径
       var ajax_pageUrl ="";
       //存放分页栏的html元素ID
       var ajax_divId = "";
       //表明该对象的类型 true--元素id，false---jQuery对象
       var ajax_is$ = true;


       $.extend({
           //url---ajax请求分页路径，包含参数，processFunc---请求成功后，用户的自定义函数 jsonParam--向后端传的json数据
           ajaxPage :function(div,url,processFunc,jsonParam,is$){
               if(!$.isFunction(processFunc)){
                   return;
               }
               ajax_pageUrl = url.indexOf("?")!=-1?url.substring(0,url.indexOf("?")):url;
               ajax_processFunc = processFunc;
               $.post(url,jsonParam,function(map){
                   map = eval("("+map+")");
                   var data = map.pageUtil;
                   //设置分页参数
                   ajax_pageIndex = data.num;
                   ajax_pageSize = data.size;
                   ajax_pageLast = data.last;
                   ajax_pageCount = data.pageCount;
                   //ajax_pageRowCount = data.rowCount;
                   ajax_divId = div;
                   ajax_is$ = is$;


                   //更新显示分页栏
                   showPageButton(data);
                   //执行用户自定义的processFunc
                   //eval(processFunc + "(data)");
                   processFunc(data);

               });
           }




       });

       //显示分页栏
       //div显示分页栏的html的Id，ajax回调数据
       function showPageButton(data){
           var strArray = new Array();
           strArray.push("<table class='page'><tr><td align='left'><span style='color:#FB8410;'>共<b style='color:red'>");
           strArray.push(data.rowCount + "</b>条共<b style='color:red'>");
           strArray.push(ajax_pageCount==0?"1":ajax_pageCount + "</b>页当前第<b style='color: red'>");
           strArray.push(ajax_pageIndex + "</b>页每页显示");
           strArray.push("<select name='basePageSize' id='basePageSize' onchange='changePageSize()'>");
           strArray.push("<option value='2'"+ (data.size==2?"selected":"")+">2</option>");
           strArray.push("<option value='5'"+ (data.size==5?"selected":"")+">5</option>");
           strArray.push("<option value='10'"+ (data.size==10?"selected":"")+">10</option>");
           strArray.push("</select> 条</span></td><td align='right'>");
           if(ajax_pageIndex!= data.first){
               strArray.push("<a href='javascript:void(0)' onclick='changePage(1)'>【首页】</a>");
               strArray.push("<a href='javascript:void(0)' onclick='changePage("+data.prev+")'>【上一页】</a>");
           }
           if(ajax_pageIndex == data.first){
               strArray.push("<span style='color:#FB8410'>【首页】</span>");
               strArray.push("<span style='color:#FB8410'>【上一页】</span>");
           }
           if(data.num!=data.last&&data.last!=0){
               strArray.push("<a href='javascript:void(0)' onclick='changePage("+ data.next +")'>【下一页】</a>");
               strArray.push("<a href='javascript:void(0)' onclick='changePage("+ data.last +")'>【末页】</a>");
           }
           if(data.num==data.last||data.last==0){
               strArray.push("<span style='color:#FB8410'>【下一页】</span>");
               strArray.push("<span style='color:#FB8410'>【末页】</span>");
           }

           strArray.push("<span style='color:#FB8410'>跳转到</span><input type='text' style='width: 30px;height: 23px' id='num'/>");
           strArray.push("<input type='button' value='GO' style='color: red;font-weight: bold;' onclick='pointToMyPage()'/>");
           strArray.push("</td></tr></table>");
           if(ajax_is$){
               $("#" + ajax_divId).html(strArray.join(""));
           }else{
               ajax_divId.html(strArray.join(""));
           }

       }

       //点击分页按钮时触发的函数
       function changePage(index){
           $.ajaxPage(ajax_divId,ajax_pageUrl,ajax_processFunc,{num:index});
       }

       //选择分页pageSize时触发的函数
       function changePageSize(){
           var size = $("#basePageSize").val();
           $.ajaxPage(ajax_divId,ajax_pageUrl,ajax_processFunc,{"num":1,"basePageSize":size});
       }

       //跳转到特定的页
       function pointToMyPage(){
           var num = $("#num").val();
           $.ajaxPage(ajax_divId,ajax_pageUrl,ajax_processFunc,{"num":num});
       }

.page a {
           text-decoration: none;
           color:#FB8410
       }

       .page{
           border:0;
           width:100%
       }