常用分页插件

常用分页插件
复制代码看看效果吧！
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>常用分页</title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <style>
    * {
        padding: 0px;
        margin: 0px;
        list-style: none;
    }

    .page a {
        color: #000;
        text-decoration: none;
    }

    .page a:hover,
    .page .page-form .go:hover,
    .page .page-prev:hover,
    .page .page-next:hover {
        background: dodgerblue;
    }

    .page span,
    .page div {
        vertical-align: middle
    }

    .page .page-prev,
    .page .page-next {
        text-decoration: none;
    }

    .page .page-num a,
    .page .page-prev,
    .page .page-next {
        padding: 6px 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
    }

    .page .page-num,
    .page .page-info,
    .page .page-form {
        display: inline-block;
    }

    .page .page-num a {
        float: left;
        margin: 12px;
        margin: 4px;
    }

    .page .page-num a.current {
        background: dodgerblue;
    }

    .page .page-form input {
         40px;
        height: 28px;
        border: 1px solid #ccc;
        box-sizing: border-box;
        padding-left: 3px;
        text-align: center;
        color: #000;
    }

    .page .page-form .go {
        vertical-align: middle;
        border-radius: 4px;
        padding: 6px 14px;
        border: 1px solid #ccc;
        background: #ccc;
    }
    </style>
</head>

<body>
    <div class="page">
        <span class="page-prev">上一页</span>
        <div class="page-num" id="idPage-num">
        </div>
        <span class="page-next">下一页</span>
        <div class="page-info">
            <span>共</span><span id="curretnNum">2</span><span>/</span><span id="pageCoun">20</span>
        </div>
        <div class="page-form">
            <span>跳转到</span>&nbsp;
            <input id="goNume" type="text">&nbsp;<span>页</span>&nbsp;<a class="go" id="idgo" href="#">确认</a>
        </div>
    </div>
</body>

</html>
<script>
function mathPages(index, totalpage) { //页码和一共有多少页
    console.log(index, totalpage)
    index = parseInt(index);
    var indexs = [];
    var pageNum;
    for (var i = 1; i <= totalpage; i++) {
        indexs.push(i); //先根据总页数创建数组，将全部页标添加到数组中

    }
    if (totalpage <= 5) {
        pageNum = indexs; //总页数<=5页时，直接输出即可
    }
    if (index <= 2) {
        pageNum = indexs.slice(0, 5); //当前页<=2时，当前页的页标就不能显示在第三位了，直接截取0~5输出            
    } else {
        var indexs2 = indexs.slice(index - 3, index + 2);
        //如果当前页标>2，则从当前页标-3开始截取总页标数组，截取5个
        if (indexs2.length >= 5) {
            pageNum = indexs2; //如果当前页不是倒数后3页，则截取没问题，直接输出
        } else {
            pageNum = indexs.slice(-5); //如果当前页是倒数后3页，就截取不到6个页标，那么直接最后截取6个页标即可
        }
    }
    $('.page #idPage-num').html('');
    for (var i = 0; i < pageNum.length; i++) {
        $('.page #idPage-num').append('<a href="#">' + pageNum[i] + '</a>');

    }
    $('.page #curretnNum').html(index)
    $('.page #pageCoun').html(totalpage);
    $('.page #idPage-num a:contains(' + index + ')').addClass('current');

}

mathPages(2, 20);

$('.page').on('click', ' #idPage-num a', function() {
    var pageCurrent = $(this).text();
    mathPages(pageCurrent, 20);

})
var currentPagePrev, currentPageNext;
$('.page').on('click', '.page-prev', function(e) {
    getCurrentPage()
    mathPages(currentPagePrev, 20);
})

$('.page').on('click', '.page-next', function(e) {
    getCurrentPage()
    mathPages(currentPageNext, 20);

})
$('.page').on('click', "#idgo", function(e) {
    getCurrentPage();
    var goPage = parseInt($.trim($('#goNume').val()));
    var countPage = $('.page #pageCoun').text();
    if (goPage > countPage) {
        $('.page #goNume').val('');
        $('.page #goNume').focus();
        alert('您输入了页码超过了总页数，请重新输入');
        return false;
    }
})

function getCurrentPage() {
    currentPagePrev = $('.page .page-num').find('a[class="current"]').prev().text();
    currentPageNext = $('.page .page-num').find('a[class="current"]').next().text();
}
</script>