网站分页demo

<!-- 分页 -->
<div class="page">
    <div value="1 0"></div>
    <div id="page" class="page_div"></div>

</div>

<script src="private/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="common/plugin/page/js/paging.js"></script>

<script>
    //分页
    $("#page").paging({
        pageNo:5,
        totalPage: 9,
        totalSize: 300,
        callback: function(num) {
            alert(num)
        }
    })
</script>

/* 分页样式 */
.page {height: 80px;}
.page_div {font-size: 12px;margin:20px auto;min-width: 402px;left: 50%;position: absolute;outline:none;
    transform: translateX(-50%); -ms-transform:translateX(-50%); -moz-transform:translateX(-50%);-webkit-transform:translateX(-50%); -o-transform:translateX(-50%);}
/* 页数按钮样式 */
.page_div a {min-width: 22px;border: 1px solid #2e4cff !important;text-align: center;margin: 0 10px;cursor: pointer;line-height: 20px;color: #2e4cff;font-size: 12px;display: inline-block;border-radius:100%;outline:none;}
#firstPage,#lastPage {width: 50px;color: #2e4cff;border: 1px solid #2e4cff!important;display: none;}
#prePage,#nextPage {width: 50px;color: #2e4cff;border: 1px solid #2e4cff!important;border-radius: 2em;}
.page_div .current {background-color: #2e4cff;border-color: #2e4cff;color: #FFFFFF;}
.page_div .current:hover {border-color: #2e4cff;color: #2e4cff;}
.totalPages {margin: 0 10px;display: none;}
.totalPages span,.totalSize span {color: #2e4cff;margin: 0 5px;}
.totalSize {margin: 0 5px;display: none;}