pagination.js

页面定义

// JS 分页
// @para page 当前页码
// @para pages 总页码数
// @para cells 页码格子数
// @para _run 委托方法名称
var Pagination = function (page, pages, cells, _run) {
    this.html = function () { 
    var _html = '<ul class="pagination pagination-sm inline"><li><a style="cursor: pointer" onclick="' + _run + '(1)">«</a></li>';
    var start = 1;
    var mid = Math.ceil(cells / 2) - 1;
    if (pages > cells) { 
           if (page + cells <= (pages + 1)) { 
               if (page > mid) {
                    start = page - mid; 
               } 
           } else { 
               start = pages - cells + 1;
            } 
       }
        var end = pages;
        if (cells >= pages) {
            end = pages;
        } else {
            if (page <= mid) { 
               end = cells;
            } else { 
               if (page + mid < pages) { 
                   end = start + cells - 1;
                } 
           } 
       } 
       for(;start <= end; start++){
            if (Number(start) == Number(page)) { 
               _html += '<li><a style="color: #00c0ef">' + start.toString() + '</a></li>';            
            } else {
                _html += '<li><a style="cursor: pointer" onclick="' + _run + '(' + start.toString() + ')">' + start.toString() + '</a></li>';
            }
        }
        return _html += '<li><a style="cursor: pointer" onclick="' + _run + '(' + pages + ')">»</a></li></ul>';
    };
};

使用方法

// 定义方法
var historyPaginationNav = function (id) {
  // TODO: 具体页面跳转或者局部刷新实现代码
}; 

var page = 1; // 当前页
var pages = 2; // 总页数
var cell = 5; // 最多显示5格
// 实例化分页对象，最后一个参数是方法名称
var historyPagination = new Pagination(page, pages, cell, 'historyPaginationNav');

// 调用分页对象的html方法返回分页的HTML代码，并使用jQuery写到 ID:pagination 元素中
$('#pagination').html(historyPagination.html());

st=>start:
 Starte=>end
op=>operation: My Operation
cond=>condition: Yes or No?

st->op->cond
cond(yes)->e
cond(no)->op