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
  • 相关阅读:
    Truck History(poj 1789)
    Highways poj 2485
    117. Populating Next Right Pointers in Each Node II
    116. Populating Next Right Pointers in Each Node
    115. Distinct Subsequences
    114. Flatten Binary Tree to Linked List
    113. Path Sum II
    109. Convert Sorted List to Binary Search Tree
    106. Construct Binary Tree from Inorder and Postorder Traversal
    105. Construct Binary Tree from Preorder and Inorder Traversal
  • 原文地址:https://www.cnblogs.com/dwb91/p/6697626.html
Copyright © 2011-2022 走看看