js 分頁技術

//分頁  
    var setPage = function (container, count, pageindex) {
        var container = container;  //div
        var count = count;   //頁總數
        var pageindex = pageindex;  //當前頁數
        var a = [];
        //總頁數少於10 全部顯示,大於10 顯示前3 後3 中間3 其餘....
        if (pageindex == 1) {
            a[a.length] = "<a class=\"prev unclick\">上一頁</a>";
        } else {
            a[a.length] = "<a class=\"prev\">上一頁</a>";
        }
        function setPageList() {
            if (pageindex == i) {
                a[a.length] = "<a  class=\"on\">" + i + "</a>";
            } else {
                a[a.length] = "<a >" + i + "</a>";
            }
        }
        //總頁數小於10
        if (count <= 10) {
            for (var i = 1; i <= count; i++) {
                setPageList();
            }
        }
            //總頁數大於10頁
        else {
            if (pageindex <= 4) {
                for (var i = 1; i <= 5; i++) {
                    setPageList();
                }
                a[a.length] = "...<a >" + count + "</a>";
            } else if (pageindex >= count - 3) {
                a[a.length] = "<a >1</a>...";
                for (var i = count - 4; i <= count; i++) {
                    setPageList();
                }
            }
            else { //當前頁在中間部分
                a[a.length] = "<a>1</a>...";
                for (var i = pageindex - 2; i <= pageindex + 2; i++) {
                    setPageList();
                }
                a[a.length] = "...<a>" + count + "</a>";
            }
        }
        if (pageindex == count) {
            a[a.length] = "<a class=\"next unclick\">下一頁</a>";
        } else {
            a[a.length] = "<a  class=\"next\">下一頁</a>";
        }
        container.innerHTML = a.join("");
        //事件點擊
        var pageClick = function () {
            var oAlink = container.getElementsByTagName("a");
            var inx = pageindex; //初始的頁碼
            oAlink[0].onclick = function () { //點擊上一頁
                if (inx == 1) {
                    return false;
                }
                inx--;
                setPage(container, count, inx);
                DataList(pageSize, inx,did);   //ajax 請求的列表
                return false;
            }
            for (var i = 1; i < oAlink.length - 1; i++) { //點擊頁碼
                oAlink[i].onclick = function () {
                    inx = parseInt(this.innerHTML);
                    setPage(container, count, inx);
   
                    DataList(pageSize, inx, did);  //ajax 請求的列表
                    return false;
                }
            }
            oAlink[oAlink.length - 1].onclick = function () { //點擊下一頁
                if (inx == count) {
                    return false;
                }
                inx++;
                setPage(container, count, inx);

                DataList(pageSize, inx, did);  //ajax 請求的列表
                return false;
            }
        }()
    }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章