前端ajax分页

在一个html页面中面临多个表格且有多个分页时可用到下面介绍的方法。

思路：首先定义一个数组，在数组中以对象形式存放每个表格的接口的地址（url）以及你所要用到的参数，每个对象对应每个表格，每个表格定义一个有序的 id ，序号从0开始，第一个就刚好对应第一个数组对象，以此类推。然后写一个公共方法，确定你要传的参数，我这里传了三个参数（代表哪一个表格，代表是否下一页，代表首页或尾页的页码），然后写点击事件，触发 function，传入 表格下标， 去数组对应取数据。然后 success 里面 通过判断第三个参数  是 非空 等于1 或者是 非空 大于1 来确定 是 首页 还是  尾页 这个时候 page 不变，当 第三个参数 为空 说明 不是 首页 和 尾页 ，那就通过第二个参数 来判断是 上一页 或者 下一页 来 page--  page++

html分页代码如下：

//第一个表单开始
<table class="allTab tab mb25">
     <thead>
        <tr class="glayBg">
             <td>序号</td>
             <td>注册时间</td>
             <td>姓名</td>
        </tr>
      </thead>
      <tbody></tbody>
</table>

//id="creditTab0" ,第一个id序号从0开始，第二个从1开始

<div class="m-page fn-clear" id="creditTab0">
    <form class="page getPageInf">
        <span>第<em class="page">1</em>页,共<em class="totalPage">1</em>页,合计
                <em class="totalItem">1</em>条<em class="split">|</em>
        </span>
       <a href="javascript:;" data="begin" onclick="commonPageFun(0,'',1)">首页</a>
       <a href="javascript:;" data="pre" onclick="commonPageFun(0,'','')">&lt;上一页</a>
       <a href="javascript:;" data="next" onclick="commonPageFun(0,1,'')">下一页&gt;</a>
       <a href="javascript:;" data="end" onclick="commonPageFun(0,'',2)">尾页</a>
       <input type="hidden" name="pageSize" value="20"/>
       <input type="text" name="currPage" class="text mask_number goto" value="1">
       <button type="button" class="page-btn" onclick="commonPageFun(0,'',3)">GO</button>
     </form>
 </div>
//第二个表单开始
<table class="allTab tab mb25">
     <thead>
        <tr class="glayBg">
             <td>序号</td>
             <td>注册时间</td>
             <td>姓名</td>
        </tr>
      </thead>
      <tbody></tbody>
</table>
<div class="m-page fn-clear" id="creditTab1">
    <form class="page getPageInf">
        <span>第<em class="page">1</em>页,共<em class="totalPage">1</em>页,合计
                <em class="totalItem">1</em>条<em class="split">|</em>
        </span>
       <a href="javascript:;" data="begin" onclick="commonPageFun(0,'',1)">首页</a>
       <a href="javascript:;" data="pre" onclick="commonPageFun(0,'','')">&lt;上一页</a>
       <a href="javascript:;" data="next" onclick="commonPageFun(0,1,'')">下一页&gt;</a>
       <a href="javascript:;" data="end" onclick="commonPageFun(0,'',2)">尾页</a>
       <input type="hidden" name="pageSize" value="20"/>
       <input type="text" name="currPage" class="text mask_number goto" value="1">
       <button type="button" class="page-btn" onclick="commonPageFun(0,'',3)">GO</button>
     </form>
 </div>

 js代码：

1、定义一个数组，把每个表格的url放进去，设置pageNum默认值为1，pageNum为当前页

        var arrPage = [
            {url:'/test/username.json',pageNum:1},                        
            {url:'/test/person.json',pageNum:1}                     
        ]

2、定义公共方法，传ajax需要的参数，（tabNum,isNext,pageNum）三个参数分别代表的是（表格下标，是否下一页，首页或尾页的页码）

var commonPageFun = function(tabNum,isNext,pageNum) {
            var pageNo = $("#creditTab"+tabNum+" em.page").text();//当前页
            var totalPage = $("#creditTab"+tabNum+" em.totalPage").text();//总页码数
            var inputPage = $("#creditTab"+tabNum+ " input[name=currPage]").val();//输入的页码
            if(inputPage*1<1||inputPage*1>totalPage*1){ //判断输入页码是否在有效范围内
                return false;
            }

        if(!pageNum){
            //!pageNum   说明不是首页或尾页
            // !isNext   代表上一页

            var newPageNo = arrPage[tabNum].pageNum;

            if((!isNext && newPageNo == 1) || (!!isNext && newPageNo == totalPage)){
                return false;
            }else {
                var num = !isNext ? --newPageNo : ++newPageNo;
                arrPage[tabNum].pageNum = num;
                $("#creditTab"+tabNum+" em.page").text(num);
                $("#creditTab"+tabNum+ " input[name=currPage]").val(num);//输入页赋值
            }
        }else {
            //是首页或尾页或者输入
            // pageNum == 1 代表首页，pageNum == 2 代表尾页，pageNum == 3 代表输入的页码

            arrPage[tabNum].pageNum = pageNum > 2 ? inputPage : (pageNum == 2 ? totalPage : pageNum)
            $("#creditTab"+tabNum+" em.page").text(arrPage[tabNum].pageNum);
            $("#creditTab"+tabNum+ " input[name=currPage]").val(arrPage[tabNum].pageNum);//输入页
        }

            $.ajax({
                url:arrPage[tabNum].url,
                type:'GET',
                dataType: 'json',
                data:{
                    name:getName(),
                    pageNum:arrPage[tabNum].pageNum
                },
                success:function (res) {
                    switch(tabNum){  
//数据处理，对于多个表格，我们这里采用函数调用形式，在函数内部处理数据赋值操作等，处理数据的函数自行写
                        case 0:{
                            usernamePage(res,tabNum);
                            break;
                        }
                        case 1:{
                            hoderPage(res,tabNum);
                            break;
                        }
                        case 2:{
                            peoplePage(res,tabNum);
                            break;
                        }
                        
                    }
                }

            })
        }

 3、将页码填回页面上，在数据处理函数中调用这个函数就可以了，以下页面默认每页20条数据

 function newPage(res,tabNum) {
        var totalPage;
        var page = $("#creditTab"+tabNum+ " input[name=currPage]").val();
        var totalItem = res.result.total;

        if(res.result.total <= 20){
            totalPage = 1;
        }else{
            totalPage = Math.ceil(res.result.total / 20);
        }

        $("#creditTab"+tabNum+ " em.page").text(page);//当前页
        $("#creditTab"+tabNum+ " em.totalPage").text(totalPage);//总页数
        $("#creditTab"+tabNum+ " em.totalItem").text(totalItem);//总条数
        return page;
    }