使用Jquery做分頁效果

之前寫過一個PHP 的分頁效果，但是今天小伙伴和我說了一個不適用后台單純用前段的JS來寫分頁，整理了一下，代碼如下：

html:

<div id="containet">
    <ul id="pageMain">
        <li>這是內容標題 第1</li>
        <li>這是內容標題 第2</li>
        <li>這是內容標題 第3</li>
        <li>這是內容標題 第4</li>
        <li>這是內容標題 第5</li>
        <li>這是內容標題 第6</li>
        <li>這是內容標題 第7</li>
        <li>這是內容標題 第8</li>
        <li>這是內容標題 第9</li>
        <li>這是內容標題 第10</li>
        <li>這是內容標題 第11</li>
        <li>這是內容標題 第12</li>
        <li>這是內容標題 第13</li>
        <li>這是內容標題 第14</li>
        <li>這是內容標題 第15</li>
        <li>這是內容標題 第16</li>
        <li>這是內容標題 第17</li>
        <li>這是內容標題 第18</li>
        <li>這是內容標題 第19</li>
        <li>這是內容標題 第20</li>
        <li>這是內容標題 第21</li>
        <li>這是內容標題 第22</li>
        <li>這是內容標題 第23</li>
        <li>這是內容標題 第24</li>
        <li>這是內容標題 第25</li>
        <li>這是內容標題 第26</li>
        <li>這是內容標題 第27</li>
    </ul>
    <div id="pageBox">
        <span id="prev">上一頁</span>
        <ul id="pageNav"></ul>
        <span id="next">下一頁</span>
    </div>
</div>

　　

　　

css:

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #containet {
            display: inline-block;
            border: 1px solid #ed0181;
            padding: 19px;
            margin: auto;
        }

        #pageMain li {
            list-style: none;
            line-height: 22px;
        }

        #pageBox {
            padding: 10px 0 0 0;
        }

        #pageBox span {
            display: inline-block;
            width: 60px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            color: #fff;
            background: #08a586;

        }

        #pageNav {
            display: inline-block;
        }

        #pageNav a {
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            color: #3a87ad;
            text-decoration: none;
        }

        #pageNav a.active, #pageNav a:hover {
            background: #3a87ad;
            color: #EFEFEF;
        }

        #prev:hover {
            cursor: pointer;
        }

        #next:hover {
            cursor: pointer;
        }
    </style>

　　本人比較喜歡用JQ，所以這里用的是JQ，沒寫原生JS的方法：

<script>
    $(function () {
        tabPage({
            pageMain: '#pageMain',
            pageNav: '#pageNav',
            pagePrev: '#prev',
            pageNext: '#next',
            curNum: 7, /*每頁顯示的條數*/
            activeClass: 'active', /*高亮顯示的class*/
            ini: 0/*初始化顯示的頁面*/
        });
        function tabPage(tabPage) {
            var pageMain = $(tabPage.pageMain);
            /*獲取內容列表*/
            var pageNav = $(tabPage.pageNav);
            /*獲取分頁*/
            var pagePrev = $(tabPage.pagePrev);
            /*上一頁*/
            var pageNext = $(tabPage.pageNext);
            /*下一頁*/


            var curNum = tabPage.curNum;
            /*每頁顯示數*/
            var len = Math.ceil(pageMain.find("li").length / curNum);
            /*計算總頁數*/
            console.log(len);
            var pageList = '';
            /*生成頁碼*/
            var iNum = 0;
            /*當前的索引值*/

            for (var i = 0; i < len; i++) {
                pageList += '<a href="javascript:;">' + (i + 1) + '</a>';
            }
            pageNav.html(pageList);
            /*頭一頁加高亮顯示*/
            pageNav.find("a:first").addClass(tabPage.activeClass);

            /*******標簽頁的點擊事件*******/
                pageNav.find("a").each(function(){
                    $(this).click(function () {
                        pageNav.find("a").removeClass(tabPage.activeClass);
                        $(this).addClass(tabPage.activeClass);
                        iNum = $(this).index();
                        $(pageMain).find("li").hide();
                        for (var i = ($(this).html() - 1) * curNum; i < ($(this).html()) * curNum; i++) {
                            $(pageMain).find("li").eq(i).show()
                        }

                    });
            })


            $(pageMain).find("li").hide();
            /************首頁的顯示*********/
            for (var i = 0; i < curNum; i++) {
                $(pageMain).find("li").eq(i).show()
            }


            /*下一頁*/
            pageNext.click(function () {
                $(pageMain).find("li").hide();
                if (iNum == len - 1) {
                    alert('已經是最后一頁');
                    for (var i = (len - 1) * curNum; i < len * curNum; i++) {
                        $(pageMain).find("li").eq(i).show()
                    }
                    return false;
                } else {
                    pageNav.find("a").removeClass(tabPage.activeClass);
                    iNum++;
                    pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
//                    ini(iNum);
                }
                for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
                    $(pageMain).find("li").eq(i).show()
                }
            });
            /*上一頁*/
            pagePrev.click(function () {
                $(pageMain).find("li").hide();
                if (iNum == 0) {
                    alert('當前是第一頁');
                    for (var i = 0; i < curNum; i++) {
                        $(pageMain).find("li").eq(i).show()
                    }
                    return false;
                } else {
                    pageNav.find("a").removeClass(tabPage.activeClass);
                    iNum--;
                    pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
                }
                for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
                    $(pageMain).find("li").eq(i).show()
                }
            })

        }


    })
</script>

　　

　

效果如下：