Page Helper 分页组件

一、HTML结构

<div>
  <a class="btn btn-last-page">上一页</a>
  <label id="current">0</label>/<label id="total">0</label>
  <a class="btn btn-next-page">下一页</a>
  <select id="select-current-page"></select>
</div>

二、CSS样式

.btn-last-page, .btn-next-page {
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    background-color: white;
    color: orange;
    border: orange solid 1px;
}

.btn-last-page:hover,.btn-next-page:hover{
    color: darkorange;
}

#select-current-page{
    margin-left: 5px;
    width: 70px;
    height: 30px;
    border: orange solid 1px;
}

三、JavaScript脚本

$(function () {
    var last = $(".btn.btn-last-page");
    var next = $(".btn.btn-next-page");
    last.parent().css('color', 'orange');

    last.click(function () { -> 上一页 
        if (current > 1 && current <= total) {
            current--;
            var start = current === 1 ? 0 : (current-1) * offset;
            var end = current === total ? list.length : current * offset;
            refresh(list, start, end);
            $current.text(current);
            $select.find('option[value=' + current + ']').prop('selected', true);
        }
    });

    next.click(function () { -> 下一页 
        if (current < total && current >= 1) {
            current++;
            var start = (current - 1) * offset;
            var end = current === total ? list.length : current * offset;
            refresh(list, start, end);
            $current.text(current);
            $select.find('option[value=' + current + ']').prop('selected', true);
        }
    });

    $select.change(function () { -> 某一页
        current = $(this).val();
        $current.text(current);
        var start = parseInt(current) === 1 ? 0 : (current - 1) * offset;
        var end = parseInt(current) === total ? list.length : current * offset;
        refresh(list, start, end);
    });
});

/* 当前页 */
var current = 1;
/* 偏移量 */
var offset = 500;
/* 总页数 */
var total = 0;
/* 当前页元素 */
var $current = $("#current");
/* 总页数元素 */
var $total = $("#total");
/* 总行数元素 */
var $line = $("#line");
/* 选页器元素 */
var $select = $("#select-current-page");

function page() { -> 初始化
    total = Math.ceil(list.length / offset);
    $total.text(total);
    current = total === 0 ? 0 : 1;
    $current.text(current);
    var end = current === total ? list.length : current * offset;
    $line.text(list.length);
    if (total > 0) {
        refresh(list, 0, end);
    } else {
        refresh(list, current, current);
    }
    options(total);
}

function refresh(data, start, end) { -> 刷新数据
    var html = "";
    for (var i = start; i < end; i++) {
        html += tr(data, i);
    }
    $tbody.html(html);
}

function options(size) {
    var html = "";
    for (var i = 1; i <= size; i++) {
        html += "<option value='" + i + "'>";
        html += "第" + i + "页";
        html += "</option>";
    }
    $select.html(html);
    $select.find('option[value=' + $current.text() + ']').prop('selected', true);
}