almost 6 years ago

寫個讓 client 端去產生分頁的 Plugin
這樣 server 端只要計算 總頁數 跟 現在頁碼 和 指定的網址 到 html 的 Plugin 就好了
也可以控制顯示的分頁模式和利用 callback 接收 data 分頁容器來做修改
不過頁碼還真是不好拿捏.....XD感覺會有bug

/*
 * 分頁 plugin
 *  範例
 *  
 *  <div id="page"></div>
 *  
 *  $("#page").myPageLink(
 *          {
 *              sumPages: 40,
 *              currentPage:6,
 *              pageSize:5,
 *              pageUrl: "plugin.html?",
 *              pageParamName: "p",
 *              firstDesc: "<<",
 *              lastDesc: ">>",
 *              preDesc: "<",
 *              nextDesc: ">",
 *              callback: function (data) {
 *                  //alert(data.html())
 *              }
 *          }
 *  );
 *  說明
 *      sumPages: 30,    總頁數
 *      currentPage: 5, 現在頁碼
 *      pageSize:5,         每排頁碼數目
 *      pageUrl: "plugin.html?", 綁定網址
 *      pageParamName: "page", 分頁參數名稱
 *      firstDesc: "第一頁", 第一頁名稱
 *      lastDesc: "最末頁", 最末頁名稱
 *      preDesc: "上一頁", 上一頁名稱
 *      nextDesc: "下一頁", 下一頁名稱
 *      preAndNextDesc: "...",  尚有頁碼注解
 *      isSetFirst: true, 啟用否 第一頁
 *      isSetLast: true, 啟用否 最末頁
 *      isSetPre: true, 啟用否 上一頁
 *      isSetNext: true, 啟用否 下一頁
 *      isSetPreAndNextDesc: true, 啟用否 尚有頁碼注解
 *      callback: function (data) {} 回傳 分頁容器  物件
 */
$.fn.myPageLink = function (settings) {
    // 預設屬性
    var _defaultSettings = {
        sumPages: 30,
        currentPage: 5,
        pageSize:5,
        pageUrl: "plugin.html?",
        pageParamName: "page",
        firstDesc: "第一頁",
        lastDesc: "最末頁",
        preDesc: "上一頁",
        nextDesc: "下一頁",
        preAndNextDesc: "...",
        isSetFirst: true,
        isSetLast: true,
        isSetPre: true,
        isSetNext: true,
        isSetPreAndNextDesc: true,
        callback: function (data) {}
    }   
    
    var _settings = $.extend(_defaultSettings, settings);
    
    var _pageMethods = {
            bindFirstPage: function() {
                if (_settings.currentPage != 1 && _settings.isSetFirst == true) {
                    _settings.pageContent += '<a id="1" href="' + _settings.pageUrl + 
                                _settings.pageParamName + '=1">' + _settings.firstDesc + '</a>';
                }
            },
            bindLastPage: function() {
                if (_settings.currentPage != _settings.sumPages && _settings.isSetLast == true) {
                    _settings.pageContent += '<a id="' + _settings.sumPages + '" href="' + _settings.pageUrl + 
                                _settings.pageParamName + '=' + _settings.sumPages + '">' + _settings.lastDesc + '</a>';
                }
            },
            bindPrePage: function() {
                if (_settings.currentPage != 1 && _settings.isSetPre == true) {
                    var pageNum = parseInt(_settings.currentPage) - 1;
                    _settings.pageContent += '<a id="' + pageNum + '" href="' + _settings.pageUrl + 
                            _settings.pageParamName + '=' + pageNum  + '">' + _settings.preDesc + '</a>';
                }
            },
            bindNextPage: function() {
                if (_settings.currentPage != _settings.sumPages && _settings.isSetNext == true) {
                    var pageNum = parseInt(_settings.currentPage) + 1;
                    _settings.pageContent += '<a id="' + pageNum + '" href="' + _settings.pageUrl + 
                            _settings.pageParamName + '=' + pageNum  + '">' + _settings.nextDesc + '</a>';
                }
            },
            bindPreDesc: function() {
                if (_settings.startPage > 1 && _settings.isSetPreAndNextDesc == true) {
                    _settings.pageContent += "<span>" + _settings.preAndNextDesc + "</span>";
                }
            },
            bindNextDesc: function() {
                if (_settings.endPage < _settings.sumPages && _settings.isSetPreAndNextDesc == true) {
                    _settings.pageContent += "<span>" + _settings.preAndNextDesc + "</span>";
                }
            },
            countStartAndEndPage : function () {
                var startPage = 1;
                var endPage = 1;
                
                // 計算起始頁碼
                startPage = _settings.currentPage - parseInt(_settings.pageSize / 2);
                // 最末頁
                if (_settings.currentPage == _settings.sumPages) {
                    startPage = _settings.sumPages - _settings.pageSize + 1;
                }
                // 第一頁
                if (_settings.currentPage == 1) {
                    startPage = 1;
                }
                // 檢查是否為小於1
                if (startPage < 1) {
                    startPage = 1;
                }
                
                // 計算終止頁碼
                var endPage = startPage + _settings.pageSize - 1;
                
                if (endPage > _settings.sumPages) {
                    startPage -=  endPage - _settings.sumPages;
                    endPage = _settings.sumPages;
                }
                
                // 檢查是否為小於1
                if (startPage < 1) {
                    startPage = 1;
                }
                
                _settings.endPage = endPage;
                _settings.startPage = startPage;                
            },
            bindPages: function() {
                
                for (var pagenum = _settings.startPage; pagenum <= _settings.endPage; pagenum++) {
                    if (pagenum == _settings.currentPage) {
                        _settings.pageContent += "<span>" + pagenum + "</span>";
                    } else {
                        _settings.pageContent += '<a id="' + pagenum  + '" href="' + _settings.pageUrl + 
                                _settings.pageParamName + '=' + pagenum  + '">' + pagenum + '</a>';
                    }
                }
            }
    };
    
    var _handler = function () {
        _settings.pageContent = "";
        
        _pageMethods.countStartAndEndPage();
        
        _pageMethods.bindFirstPage();
        _pageMethods.bindPrePage();
        _pageMethods.bindPreDesc();
        _pageMethods.bindPages();
        _pageMethods.bindNextDesc();
        _pageMethods.bindNextPage();
        _pageMethods.bindLastPage();
        
        $(this).append(_settings.pageContent);
        
        _settings.callback($(this));
    }
    
    return this.each(_handler);
}

使用 Ajax 參考範例

setPage(1, 40);
function setPage(page, sumpages) {
    $("#page").html("");
    
    $("#page").myPageLink(
            {
                sumPages: sumpages,
                currentPage:page,
                pageSize:11,
                callback: function (data) {
                    data.find("a").bind("click", function () {
                        // 加入Ajax
                        
                        // 重設定分頁
                        setPage(this.id, sumpages);
                        return false;
                    });
                }
            }
    );
}
← Html 注解 與 POST 問題 Validate Plugin →
 
comments powered by Disqus