前后端合作开发分页功能（一）

前言：互联网的本质和核心就是数据的传递和共享。就前后端合作开发项目而言，一个不能回避的问题就是对数据的罗列，这就涉及到数据分页功能的开发。

需求简述

1、简单型

最简单的分页只需要每次加载出指定数量的数据即可，不用考虑其他的因素，最常见的就是移动端的各种滑到底部上拉加载更多。这种分页只需要高度条到底了就出发Post请求，向后台发送固定的数据参数以及动态变化的Page即可：

//封装post请求
var GetData=function(paramater1,paramater2,page){
    $.post("/MyController/GetMyDate",{
            par1:paramater1,
            par2:paramater2,
            thepage:page
        },function(data){
            console.log(data);
            //进行数据处理和呈现
            ······
    });
};

//初始化页码
var  page_num=1;

//进行首次请求
GetData(myParamater1,myParamater2,page_num);

//封装“加载更多”，事件监听
$(window).scroll(function(){
　　var scrollTop = $(this).scrollTop();
　　var scrollHeight = $(document).height();
　　var windowHeight = $(this).height();
    //判断到底部触发事件
　　if(scrollTop + windowHeight == scrollHeight){
　　　  //页码加一，查询条件不变
       page_num+=1；
       GetData(myParamater1,myParamater2,page_num);
　　}
});

Ps：有一个问题需要注意，倘若用户下滑到底部，当请求尚未完成时，用户不耐烦地再次滑动了一下，又一次触发了请求，这样对服务器来说可是个大Bug，如何解决呢？我想了一个笨办法：加入一个变量对scroll事件进行控制，具体代码如下：

//封装post请求
var GetData=function(paramater1,paramater2,page){
    $.post("/MyController/GetMyDate",{
            par1:paramater1,
            par2:paramater2,
            thepage:page
        },function(data){
            console.log(data);
            //进行数据处理和呈现
            ······
    });
};

//初始化页码
var  page_num=1;
//是否加载成功
var if_get=true;

//进行首次请求
GetData(myParamater1,myParamater2,page_num);

//封装“加载更多”，事件监听
$(window).scroll(function(){
　　var scrollTop = $(this).scrollTop();
　　var scrollHeight = $(document).height();
　　var windowHeight = $(this).height();
    //判断到底部触发事件+是否加载成功
　　if(scrollTop + windowHeight == scrollHeight && if_get==true){
       //请求完成前，设置if_get的值
       if_get=flase;
　　　  //页码加一，查询条件不变
       page_num+=1；
       GetData(myParamater1,myParamater2,page_num);
       //请求完成后，设置if_get的值
       if_get=true;
　　}
});

当然了，这种简单的下滑加载更多在很多框架（例如Mui等）里都可以很便捷得实现，若以上代码有误或思路不佳，欢迎拍砖。（未完待续······）