当前位置 : 主页 > 网络编程 > JavaScript >

JS 豆瓣东西分页(超出页码部分会以神略号代替)

来源:互联网 收集:自由互联 发布时间:2021-06-30
JS 部分 根据请求参数获取对应的值 * @param item * @returns {*} */function getQueryString(item) { var sValue = location.search.match(new RegExp("[\?\]" + item + "=([^\]*)(\?)", "i")); return sValue ? sValue[1] : sValue;}function
JS 部分
根据请求参数获取对应的值
 * @param item
 * @returns {*}
 */
function getQueryString(item) {
    var sValue = location.search.match(new RegExp("[\?\&]" + item + "=([^\&]*)(\&?)", "i"));
    return sValue ? sValue[1] : sValue;
}

function page(option) {
    var container = option.container,
        totalPage = option.total,
        // perPage = option.size,
        currentPage = parseInt(getQueryString('page')) || 1,
        pageStr = '';

    var breakPage = 5,
        currentPosition = 2,        //currentPosition 是 breakPage 的中间位置
        breakSpace = 2,
        maxSpace = 2,
        prevNum = currentPage - currentPosition,
        nextNum = currentPage + currentPosition;

    if (prevNum < 1) prevNum = 1;
    if (nextNum > totalPage) nextNum = totalPage;
    pageStr += (currentPage == 1) ? '< 前页': '< 前页';

    // = prevNum > maxSpace + breakSpace
    if (prevNum - breakSpace > maxSpace) {
        for (var i=1; i <= breakSpace; i++) pageStr += '' + i + '';
        pageStr += '...';

        // 28 - 9 + 1 = 20; i < 9; i++
        for (var i=totalPage - breakPage + 1; i < prevNum; i++) pageStr += '' + i + '';
    } else {
        for (var i=1; i < prevNum; i++) pageStr += '' + i + '';
    }

    //中间隔着的距离刚好是 (nextNum - prevNum + 1) == breakSpace
    for (i = prevNum; i <= nextNum; i++) {
        pageStr += (currentPage == i) ? '' + i + '': '' + i + '';
    }


    if (totalPage - breakSpace - nextNum + 1 > maxSpace) {
        for (i = nextNum + 1; i <= breakPage; i++) pageStr += '' + i + '';
        pageStr += '...';
        for (i = totalPage - breakSpace + 1; i <= totalPage; i++) pageStr += '' + i + '';
    } else {
        for (i = nextNum + 1; i <= totalPage; i++) pageStr += '' + i + '';
    }


    pageStr += (currentPage == totalPage) ? '后页 >': '后页 >';
    $(container).html(pageStr);
}
对应的 CSS
/*分页开始*/
.customer_pager {
    font: 14px Arial, Helvetica, sans-serif;
    color: #aaa;
    margin: 20px 0;
    line-height: 150%;
    text-align: center;
}

.paginator .prev {
    margin-right: 20px;
}

.paginator .next {
    margin-left: 20px;
}

.paginator .thispage {
    color: #fff;
    background: #de533c;
    padding: 0 4px;
}

.paginator a:link, .paginator a:visited {
    color: #654f41;
}

a:link, a:visited {
    color: #985d3e;
}

.paginator a, .thispage, .break {
    padding: 0px 4px;
    margin: 2px;
}
/*分页结束*/
网友评论