zoukankan      html  css  js  c++  java
  • 滑动分页通用代码

     这个分页代码的环境是 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 id="xunhunLi" class=" b-border">',
                indexend: '<input type="hidden" id="endInputId">',//页面中遍历元素的后面增加这个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
  • 相关阅读:
    c调用python记录
    linux 进程内存基础
    doubango类面向对象研究
    HBuilderX 连接 逍遥模拟器 之 解决没法找到模拟器设备 问题
    Application,Session,Cookie,ViewState和Cache区别
    每个.Net开发人员应该下载的十种必备工具
    ASP.NET面试资料
    .net 主题与样式
    浅谈C#当中的out关键字
    5ResponseModel响应模型
  • 原文地址:https://www.cnblogs.com/dwb91/p/6697626.html
Copyright © 2011-2022 走看看