滑动分页通用代码

这个分页代码的环境是 SpringMVC +JSP；action返回的是 ModelAndView对象

<script src="${ctx}/assets/all/jquery.js"></script>
    <script language="JavaScript">
        var ctx = '${ctx}';//这个是项目的根路径
        var _config = {
            urlstr:'${ctx}/shop-${shopId}/hd/${hdType}.html?shopCid=${shopCid}',//请求后台数据的地址（action）
            container: '#xunhunLi',//页面中需要遍历元素的父元素id
            parstr: '1',//是否有参数：1是
            indexstart: '<ul >',
            indexend: '<input type="hidden" >',//页面中遍历元素的后面增加这个input元素 用于js截取
            indexflag: '1',//是否截取：1是，0不是
            pageNumber:1//滑动加载第几页开始
        };
    </script>
    <script type="text/javascript" src="${ctx}/assets/js/morepage.js"></script>

morepage.js代码如下

    var ajax_busy = false; //ajax 请求标记
    var tuch_end = true; // 滑动到底部请求标记
    var last_page = false; // 当前最后一页标记
    var p =2;
    if(_config.pageNumber!=undefined){
        var p = _config.pageNumber;
    }
    
    $(window).scroll(function(){
        var htmlHeight=document.body.scrollHeight||document.documentElement.scrollHeight;
        var clientHeight=document.documentElement.clientHeight;
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        if((scrollTop+clientHeight)>(htmlHeight-50)){
            if(tuch_end)
            {
                tuch_end=false;
            //    more_page("<%=request.getContextPath()%>/ajax/patientmanager/morevaluationinfo.do?docid=${model.id}",".EvList","1","","","0");
                more_page();
            }
        }
    });
    function more_page_one(page,url) {
        p=page;
        _config.urlstr=url;
        more_page();
    }
    function more_page(){
        /*从外部JSP配置进来的参数
        参数说明 urlstr : 路径 container: 容器（如  .class #id） parstr: 1表示路径中已带参数
        indexstart : 截取起始位置   indexenc:截取结束位置  indexflag: 是否对返回信息进行截取 1表示截取*/
        var urlstr = _config.urlstr;
        var container = _config.container;
        var parstr = _config.parstr;
        var indexstart = _config.indexstart;
        var indexend = _config.indexend;
        var indexflag = _config.indexflag;
        
        if(null == urlstr || urlstr.length == 0){
            return ;
        }
        if(null == container || container.length == 0){
            return ;
        }
        if(ajax_busy == false && !last_page){
            if(parstr == '1'){
                urlstr += "&currentPage="+p;
            }else{
                urlstr = "?currentPage="+p;
            }
            $.ajax({
                url: urlstr,
                type:"GET",
                dataType: "html",
                async: false,
                beforeSend: function(){
                    ajax_busy = true;
                },
                complete:function(){
                    ajax_busy = false;
                },
                success:function(data){
                    if(data.trim()!=""){
                        if(indexflag == '1'){ //判断是否需要截取返回的数据
                            data = data.substring(data.lastIndexOf(indexstart)+indexstart.length,data.lastIndexOf(indexend));
                            if(data.trim()!=""){ //判断是否返回的数据为空//2
                                $(container).append(data);
                                p++;
                                last_page = false;
                            }else{
                                last_page = true;
                                $('#page').show();
                            }
                        }else{
                            $(container).append(data);
                            p++;
                            last_page = false;
                        }
                    }else{
                    //    $("#load").hide();
                        $('#page').show();
                        last_page = true;
                    }
                    tuch_end = true;
                },
                error:function(){
                    last_page = true;
                    $('#page').show();
                }
            });
        }
    }

View Code

滑动分页通用代码

相关推荐