jq 分页功能解析与详情

此次分页功能我通过分页插件的形式完成，其中所有的逻辑内容都是基于此次分页插件的形式

分页插件的地址：http://www.jq22.com/jquery-info21532

第一步：定义全局变量总数据：dataList ，每页显示条数pageSize，最多显示条数maxBtnNum

 

 _static:{
        //承接从外面传递过来的数据，默认undefined
        dataList:undefined,
        pageSize:4,
        maxBtnNum:5
    },

第二步：初始化分页

initPage:function () {
            // 初始化 分页
            var pageS1 = createPage('.page_s1');
            // 设置分页
            setPage(pageS1,{
                pageTotal: _webMore._static.dataList.length, // 数据总条数
                pageSize: _webMore._static.pageSize,    // 每页显示条数
                pageCurrent: 1,  //  当前页
                maxBtnNum: _webMore._static.maxBtnNum,   // 最多按钮个数  （最少5个）
                change:function(pageNo){   // 页数变化回调函数（返回当前页码）
                    //返回当前页
                    _webMore._tool.showData(pageNo);
                },
            })
        }

第二步：整理思路，我们需要知道的是当前页的开始位置和结束位置

 showData:function (pageNo) {
            //将数据进行动态展示
            $("#id_contentBox ul").html('');
            //获取当前数据
            var indexBegin = (pageNo -1 ) *  _webMore._static.pageSize
                ,indexEnd = pageNo *  _webMore._static.pageSize -1;//获取结束数据
            var index = 1;
            for(var i = indexBegin; i <= indexEnd; i++){
                var item = _webMore._static.dataList[i];
                var patt = /<[^>]+>/g;//正则表达式过滤标签
                if (item) {
                    var newStr = item.srContent.replace(patt,'');
                    $("#id_contentBox ul").append(
                        "<li>"+ "<div class='mDate' id='id_mDate'>"+
                        "<p class='mTime'>"+formatDate(item.sendTime)+"</p>"+
                        "<p class='mYear'>"+formatDate2(item.sendTime)+"</p>"
                        +"</div>"+
                        "<div class='getData' id='id_getData'>"+
                        "<p class='dataTitle'>"+ item.srTitle+"</p>"+
                        "<p class='getResource'>"+"信息来源:"+"<span>"+item.srInfo+"</span>"+"</p>"+
                        "<div class='listContent' id='listContent'>"+newStr+"</div>"+
                        "</div>"+
                        "</li>"
                    )
                }
                index++;
                console.log("index:"+index);
            }
        },

若需要完整代码请留言