前端_javascript本地实现分页(摘录)

function _LessonJsonData(){
    
     var str = [
    
           {
           "id":"1",//id
           "name":"sl",
           "imgName":"/images/xx.jpg",
           "link":"/xx/xx.aspx?id=1",
           "type":"sl",
           "lessonCountText":"xxx",//课时
           "desc":"xxx",//介绍
           "content"://内容
                [
                    {
                        "title":"第一讲 slxxx",
                        "value":"<ul><li>一.xxx</li><li>二.xxx</li></ul>"
                    },
                    {
                        "title":"第二讲 xxx",
                        "value":"<ul><li>一.xxx</li><li>xxxx</li></ul>"
                    },
                    {
                        "title":"第三讲 xxx",
                        "value":"<ul><li>一.xx</li><li>二.xx</li><li>三.xx</li><li>四.xx</li><li>五.xx</li><li>六.xx</li></ul>"
                    },
                                        {
                        "title":"第四讲：xxx",
                        "value":"<ul><li>一、xx/50/xx</li><li>二、xx</li><li>三、xx</li><li>四、xx</li></ul>"
                    },
                                        {
                        "title":"第五讲：slxx",
                        "value":"<ul><li>一、slxx</li><li>二、slxx</li><li>三、slxx</li></ul>"
                    }
                ]
           },
           {
           "id":"2",//id
           "name":"xmz",
           "imgName":"/images/xx.jpg",
           "link":"/xx/xx.aspx?id=2",
           "type":"xmz",
           "lessonCountText":"xx",//课时
           "desc":"xxxxxxxxxxxxxxxxx",//介绍
           "content"://内容
                [
                    {
                        "title":"第一讲  xxxxx",
                        "value":"<ul><li>xxxxx</li></ul>"
                    },
                    {
                        "title":"第二讲：xxxxxxx",
                        "value":"<ul><li></li></ul>"
                    },
                    {
                        "title":"第三讲：xxxxx",
                        "value":"<ul><li>xxxxxx</li></ul>"
                    },
                    {
                        "title":"第四讲：xxxxxxxxxx",
                        "value":"<ul><li>xxxxxxx</li></ul>"
                    },
                    {
                        "title":"第五讲：xxxxxxx",
                        "value":"<ul><li></li></ul>"
                    },
                    {
                        "title":"第六讲：xxxxxxxxxxxxx",
                        "value":"<ul><li></li></ul>"
                    },
                    {
                        "title":"第七讲：xxxxxxxxxxx",
                        "value":"<ul><li></li></ul>"
                    },
                    {
                        "title":"第八讲：xxxxxxxxxx",
                        "value":"<ul><li></li></ul>"
                    },
                    {
                        "title":"第九讲：xxxxxxxxxx",
                        "value":"<ul><li></li></ul>"
                    },
                    {
                        "title":"第十讲：xxxxxxxxxxxx",
                        "value":"<ul><li></li></ul>"
                    },
                    {
                        "title":"第十一讲：xxxxxxxxxx",
                        "value":"<ul><li></li></ul>"
                    },
                    {
                        "title":"第十二讲：xxxxxxxx",
                        "value":"<ul><li></li></ul>"
                    },
                    {
                        "title":"第十三讲：xxxxxxxxxxxx",
                        "value":"<ul><li></li></ul>"
                    }
                    
                ]
           }
    ]
}


 

javascript代码实现，如下

<script type="text/javascript">
        //根据课程类型 查询 该类型下的所有课程,返回一个二维数组
        function getInforByType(lessonType) {
            var _LessonJsonData2 = new Array();
            var dz = 0;
            if (lessonType == "全部") {
                for (var ii1 = 0; ii1 < _LessonJsonData().length; ii1++) {
                    _LessonJsonData2[ii1] = _LessonJsonData()[ii1];
                }
            } else {
                for (var ii2 = 0; ii2 < _LessonJsonData().length; ii2++) {
                    if (lessonType == _LessonJsonData()[ii2].type) {
                        _LessonJsonData2[dz] = _LessonJsonData()[ii2];
                        dz++;
                    }
                }
            }
            return _LessonJsonData2;
        }
        //返回一个二维数组
        function ProcessArray(lessonData, pageSize) {
            //计算出总页数
            var _j;
            if ((lessonData.length % pageSize != 0 && lessonData.length >= 16) || lessonData.length == 16) {
                _j = lessonData.length / pageSize;
            } else {
                _j = lessonData.length / pageSize + 1;
            }
            //整理成[ 
            //        [["name":"nyb"],["name":"lj"],["name":"yy"],...],
            //        [["name":"zx"],["name":"wg"],["name":"jl"],...],
            //        ... 
            //      ]
            //便于分页
            var parray = new Array();
            var lsdata = new Array();
            lsdata = lessonData;
            for (var cp = 0; cp < parseInt(_j); cp++) {
                var stime = new Array();
                stime = lsdata.slice(0, pageSize);
                parray[cp] = stime;
                lsdata = lsdata.slice(pageSize, lsdata.length);
            }
            //
            return parray;
        }
        //rtnjson:所有数据，pageSize:一页显示多少个,currentPage:当前页码
        function ChangePager(rtnjson, pageSize, currentPage) {
            //
            var allData = ProcessArray(rtnjson, pageSize);
            //
            return allData[currentPage - 1];
        }
        //生成课程页面代码
        function Cdata(lessonjson, psize, pcount) {
            //
            var _rtnjson = new Array();
            _rtnjson = ChangePager(lessonjson, psize, pcount);
            //
            var strTotal = "";
            var strTop = "<div class='kcss4'>";
            var strMiddle;
            var strClear = "<div class='clear'></div>";
            var strBottom = "</div>";
            //
            for (var i2 = 0; i2 < _rtnjson.length; i2++) {
                //
                var _txtmsg = _rtnjson[i2];
                //
                var lessonName = _txtmsg.name;
                var lessonImg = _txtmsg.imgName;
                var lessonLink = _txtmsg.link;
                strMiddle = "<div class='kcss4-1'>"
                          + "<div class='kcss41-1'><img src='" + lessonImg + "' width='158' height='111' /></div>"
                          + "<div class='kcss41-2'><a href='" + lessonLink + "'>" + lessonName + "</a></div>"
                          + "</div>";
                strTotal += strMiddle;
                if ((i2 + 1) % 4 == 0 && (i2 + 1) >= 4) {
                    strTotal += strClear;
                    strTotal += strBottom;
                    strTotal += strTop;
                }
            }
            return strTotal;
        }
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            var a1 = new Array();
            a1 = getInforByType("全部");
            //
            $(".kcss341-context").html("").html(Cdata(a1, 16, 1));
            _createCode(a1, 16); //生成翻页html并指定事件
            //
            //点击 类型按钮 时,...
            $("label").click(function () {
                var lba1 = new Array();
                lba1 = getInforByType($(this).text());
                $(".kcss341-context").html("").html(Cdata(lba1, 16, 1));
                $(this).attr("class", "seleted").siblings("label").removeAttr("class");
                _createCode(lba1, 16); //生成翻页html并指定事件
            });
        });
    </script>
    <script type="text/javascript">
        //得到当前数据有多少页
        function GetPagecount(rtnjson, pageSize) {
            return ProcessArray(rtnjson, pageSize).length;
        }
        //生成翻页的HTML代码
        function _createCode(mtotal, psize) {
            $(".kcss351-context-bottom a").die("click");
            //
            $(".kcss351-context-bottom").html(""); //.append("<a href='#' class='prePage'>上一页</a> ");
            var str = "";
            for (var i = 0; i < GetPagecount(mtotal, psize); i++) {
                if (i + 1 == 1) {
                    str += "<a href='#' class='currentPage'>" + (i + 1) + "</a> ";
                } else if (i + 1 == GetPagecount(mtotal, psize)) {
                    str += "<a href='#'>" + (i + 1) + "</a> ";
                } else {
                    str += "<a href='#'>" + (i + 1) + "</a> ";
                }
            }
            $(".kcss351-context-bottom").append(str); // + "<a href='#' class='nextPage'>下一页</a>    ");
            //
            $(".kcss351-context-bottom a").live("click", function () {
                currentPage = $(this).text();
                $(".kcss341-context").html("").html(Cdata(mtotal, 16, currentPage));
                $(this).attr("class", "currentPage");
                $(this).siblings("a").removeAttr("class");
            });
        }
    </script>