jquery pagination多样式分页插件代码

@charset "UTF-8";

/*ccs-1*/
.whj_jqueryPaginationCss-1{
    display: inline-block;
    padding: 5px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.whj_jqueryPaginationCss-1 div{
    display: inline-block;
    vertical-align: bottom;
    height: 24px;
    line-height: 24px;
}
.whj_jqueryPaginationCss-1 .whj_padding{
    padding: 1px 9px;
}
.whj_jqueryPaginationCss-1 .whj_bgc{
    background-color: #fff;
    color: #698ca9;
}
.whj_jqueryPaginationCss-1 .whj_border{
    border: 1px solid #5b9fd6;
}
.whj_jqueryPaginationCss-1 .whj_color{
    color: #698ca9;
}
.whj_jqueryPaginationCss-1 .whj_hover:hover{
    background-color: #d4f1ff;
    color: #698ca9;
    cursor: pointer;
}
.whj_jqueryPaginationCss-1 .whj_checked{
    background-color: #d4f1ff;
    color: #698ca9;
}
.whj_jqueryPaginationCss-1 .whj_hoverDisable{
    opacity: 0.5;
}
.whj_jqueryPaginationCss-1 select{
    height: 28px;
    vertical-align: bottom;
    padding: 0px;
    outline: none;
}
.whj_jqueryPaginationCss-1 input{
    padding: 0px;
    height: 26px;
    outline: none;
    text-align: center;
    width: 60px;
    vertical-align: bottom;
}
.whj_jqueryPaginationCss-1 div,.whj_jqueryPaginationCss-1 input,.whj_jqueryPaginationCss-1 select{
    margin: 2px;
}

/*ccs-2*/
.whj_jqueryPaginationCss-2{
    display: inline-block;
    padding: 5px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.whj_jqueryPaginationCss-2 div{
    display: inline-block;
    vertical-align: bottom;
    height: 24px;
    line-height: 24px;
}
.whj_jqueryPaginationCss-2 .whj_padding{
    padding: 1px 9px;
}
.whj_jqueryPaginationCss-2 .whj_bgc{
    background-color: #5194ca;
    color: #fff;
}
.whj_jqueryPaginationCss-2 .whj_border{
    border: 1px solid #5194ca;
}
.whj_jqueryPaginationCss-2 .whj_color{
    color: #5194ca;
}
.whj_jqueryPaginationCss-2 .whj_hover:hover{
    background-color: #d4f1ff;
    color: #5194ca;
    cursor: pointer;
}
.whj_jqueryPaginationCss-2 .whj_checked{
    background-color: #d4f1ff;
    color: #5194ca;
}
.whj_jqueryPaginationCss-2 .whj_hoverDisable{
    opacity: 0.7;
}
.whj_jqueryPaginationCss-2 select{
    height: 28px;
    vertical-align: bottom;
    padding: 0px;
    outline: none;
}
.whj_jqueryPaginationCss-2 input{
    padding: 0px;
    height: 26px;
    outline: none;
    text-align: center;
    width: 60px;
    vertical-align: bottom;
}
.whj_jqueryPaginationCss-2 div,.whj_jqueryPaginationCss-2 input,.whj_jqueryPaginationCss-2 select{
    margin: 2px;
}

/*ccs-3*/
.whj_jqueryPaginationCss-3{
    display: inline-block;
    padding: 5px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.whj_jqueryPaginationCss-3 div{
    display: inline-block;
    vertical-align: bottom;
    height: 24px;
    line-height: 24px;
}
.whj_jqueryPaginationCss-3 .whj_padding{
    padding: 1px 9px;
}
.whj_jqueryPaginationCss-3 .whj_bgc{
    background-color: #7a7b7b;
    color: #fff;
}
.whj_jqueryPaginationCss-3 .whj_border{
    border: 1px solid #929292;
}
.whj_jqueryPaginationCss-3 .whj_color{
    color: #929292;
}
.whj_jqueryPaginationCss-3 .whj_hover:hover{
    background-color: #e0dddd;
    color: #7a7b7b;
    cursor: pointer;
}
.whj_jqueryPaginationCss-3 .whj_checked{
    background-color: #e0dddd;
    color: #7a7b7b;
}
.whj_jqueryPaginationCss-3 .whj_hoverDisable{
    opacity: 0.5;
}
.whj_jqueryPaginationCss-3 select{
    height: 28px;
    vertical-align: bottom;
    padding: 0px;
    outline: none;
}
.whj_jqueryPaginationCss-3 input{
    padding: 0px;
    height: 26px;
    outline: none;
    text-align: center;
    width: 60px;
    vertical-align: bottom;
}
.whj_jqueryPaginationCss-3 div,.whj_jqueryPaginationCss-3 input,.whj_jqueryPaginationCss-3 select{
    margin: 2px;
}

/*ccs-4*/
.whj_jqueryPaginationCss-4{
    display: inline-block;
    padding: 5px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.whj_jqueryPaginationCss-4 div{
    display: inline-block;
    vertical-align: bottom;
    height: 24px;
    line-height: 24px;
}
.whj_jqueryPaginationCss-4 .whj_padding{
    padding: 1px 9px;
}
.whj_jqueryPaginationCss-4 .whj_bgc{
    background-color: #f5f5f5;
    color: #907272;
}
.whj_jqueryPaginationCss-4 .whj_border{
    border: 1px solid #907272;
}
.whj_jqueryPaginationCss-4 .whj_color{
    color: #907272;
}
.whj_jqueryPaginationCss-4 .whj_hover:hover{
    background-color: #afacac;
    color: #fff;
    cursor: pointer;
}
.whj_jqueryPaginationCss-4 .whj_checked{
    background-color: #afacac;
    color: #fff;
}
.whj_jqueryPaginationCss-4 .whj_hoverDisable{
    opacity: 0.5;
}
.whj_jqueryPaginationCss-4 select{
    height: 28px;
    vertical-align: bottom;
    padding: 0px;
    outline: none;
}
.whj_jqueryPaginationCss-4 input{
    padding: 0px;
    height: 26px;
    outline: none;
    text-align: center;
    width: 60px;
    vertical-align: bottom;
}
.whj_jqueryPaginationCss-4 div,.whj_jqueryPaginationCss-4 input,.whj_jqueryPaginationCss-4 select{
    margin: 2px;
}

/*ccs-5*/
.whj_jqueryPaginationCss-5{
    display: inline-block;
    padding: 5px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.whj_jqueryPaginationCss-5 div{
    display: inline-block;
    vertical-align: bottom;
    height: 24px;
    line-height: 24px;
}
.whj_jqueryPaginationCss-5 .whj_padding{
    padding: 1px 9px;
}
.whj_jqueryPaginationCss-5 .whj_bgc{
    background-color: #199eaf;
    color: #fff;
}
.whj_jqueryPaginationCss-5 .whj_border{
    border: 1px solid #199eaf;
}
.whj_jqueryPaginationCss-5 .whj_color{
    color: #199eaf;
}
.whj_jqueryPaginationCss-5 .whj_hover:hover{
    background-color: #d4f1ff;
    color: #199eaf;
    cursor: pointer;
}
.whj_jqueryPaginationCss-5 .whj_checked{
    background-color: #d4f1ff;
    color: #199eaf;
}
.whj_jqueryPaginationCss-5 .whj_hoverDisable{
    opacity: 0.5;
}
.whj_jqueryPaginationCss-5 select{
    height: 28px;
    vertical-align: bottom;
    padding: 0px;
    outline: none;
}
.whj_jqueryPaginationCss-5 input{
    padding: 0px;
    height: 26px;
    outline: none;
    text-align: center;
    width: 60px;
    vertical-align: bottom;
}
.whj_jqueryPaginationCss-5 div,.whj_jqueryPaginationCss-5 input,.whj_jqueryPaginationCss-5 select{
    margin: 2px;
}

html代码

<!DOCTYPE html>
<html>
<head>
    <title>index</title>
    <meta http-equiv="Expires" content="0"/>
    <meta http-equiv="Cache" content="no-cache"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
	
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/pagination.min.js"></script>
    <style>
        .cib{
            padding: 5px 8px;
        }
        .cib input{
            vertical-align: bottom;
            height: 20px;
            color: #567e84;
            margin: 2px 0px;
        }
        .cib button{
            vertical-align: bottom;
            height: 26px;
            cursor: pointer;
            background-color: #cbefff;
            border: 1px solid #44a8d6;
            color: #567e84;
            margin: 2px 0px;
        }
        .desc{
            padding-left: 8px;
            color: #657e9a;
        }
    </style>
</head>
<body>
    <div class="desc">总页数为零时，不显示分页插件，可自定义显示文字及css</div>

    <div id="pagination_1"></div>
    <br/>

    <div id="pagination_2"></div>
    <br/>

    <div id="pagination_3"></div>
    <br/>

    <div id="pagination_4"></div>
    <br/>

    <div id="pagination_5"></div>
    <br/>

    <div id="pagination_6"></div>
    <br/>

    <div id="pagination_7"></div>
    <br/>

    <div id="pagination_8"></div>
    <br/>

    <div class="desc">当请求服务器返回数据时，需重新设置当前页码及总页数</div>
    <div class="cib">
        <input type="text" name="currPage_9" placeholder="当前页码"/>
        <input type="text" name="totalPage_9" placeholder="总页数"/>
        <button type="button" id="btn_9">设置</button>
    </div>
    <div id="pagination_9"></div>
    <br/>

    <div id="pagination_10"></div>
    <br/>

    <div id="pagination_11"></div>
    <br/>

    <div id="pagination_12"></div>
    <br/>

    <div id="pagination_13"></div>
    <br/>

    <div id="pagination_14"></div>
    <br/>

    <div id="pagination_15"></div>
    <br/>

    <div id="pagination_16"></div>
    <br/>

    <script type="text/javascript">
        $("#pagination_1").pagination({
            callBack: function (currPage, pageSize) {
                console.log('currPage:' + currPage + '     pageSize:' + pageSize);
            }
        });
        $("#pagination_2").pagination({
            pageSizeOpt: [
                {'value': 5, 'text': '5/page', 'selected': true},
                {'value': 10, 'text': '10/page'},
                {'value': 15, 'text': '15/page'},
                {'value': 20, 'text': '20/page'}
            ],
            totalPage: 18,
            showPageNum: 5,
            firstPage: 'first',
            previousPage: 'previous',
            nextPage: 'next',
            lastPage: 'last',
            skip: 'skip',
            confirm: 'go',
            refresh: 'refresh',
            totalPageText: 'the total {} pages',
            isShowFL: true,
            isShowPageSizeOpt: true,
            isShowSkip: true,
            isShowRefresh: true,
            isShowTotalPage: true,
            isResetPage: false,
            callBack: function (currPage, pageSize) {
                console.log('currPage:' + currPage + '     pageSize:' + pageSize);
            }
        });
        $("#pagination_3").pagination({
            pageSizeOpt: [
                {'value': 5, 'text': '5条/页', 'selected': true},
                {'value': 10, 'text': '10条/页'},
                {'value': 15, 'text': '15条/页'},
                {'value': 20, 'text': '20条/页'}
            ],
            totalPage: 18,
            showPageNum: 5,
            firstPage: '首页',
            previousPage: '上一页',
            nextPage: '下一页',
            lastPage: '尾页',
            skip: '跳至',
            confirm: '确认',
            refresh: '刷新',
            totalPageText: '共{}页',
            isShowFL: true,
            isShowPageSizeOpt: true,
            isShowSkip: true,
            isShowRefresh: true,
            isShowTotalPage: true,
            isResetPage: false,
            callBack: function (currPage, pageSize) {
                console.log('currPage:' + currPage + '     pageSize:' + pageSize);
            }
        });
        $("#pagination_4").pagination({
            totalPage: 18,
            showPageNum: 5,
            isShowFL: false,
            isShowPageSizeOpt: true,
            isShowSkip: true,
            isShowRefresh: true,
            isShowTotalPage: true,
            isResetPage: false,
            callBack: function (currPage, pageSize) {
                console.log('currPage:' + currPage + '     pageSize:' + pageSize);
            }
        });
        $("#pagination_5").pagination({
            totalPage: 18,
            showPageNum: 5,
            isShowFL: false,
            isShowPageSizeOpt: false,
            isShowSkip: true,
            isShowRefresh: true,
            isShowTotalPage: true,
            isResetPage: false,
            callBack: function (currPage, pageSize) {
                console.log('currPage:' + currPage + '     pageSize:' + pageSize);
            }
        });
        $("#pagination_6").pagination({
            totalPage: 18,
            showPageNum: 5,
            isShowFL: false,
            isShowPageSizeOpt: false,
            isShowSkip: false,
            isShowRefresh: true,
            isShowTotalPage: true,
            isResetPage: false,
            callBack: function (currPage, pageSize) {
                console.log('currPage:' + currPage + '     pageSize:' + pageSize);
            }
        });
        $("#pagination_7").pagination({
            totalPage: 18,
            showPageNum: 5,
            isShowFL: false,
            isShowPageSizeOpt: false,
            isShowSkip: false,
            isShowRefresh: false,
            isShowTotalPage: true,
            isResetPage: false,
            callBack: function (currPage, pageSize) {
                console.log('currPage:' + currPage + '     pageSize:' + pageSize);
            }
        });
        $("#pagination_8").pagination({
            totalPage: 18,
            showPageNum: 5,
            isShowFL: false,
            isShowPageSizeOpt: false,
            isShowSkip: false,
            isShowRefresh: false,
            isShowTotalPage: false,
            isResetPage: false,
            callBack: function (currPage, pageSize) {
                console.log('currPage:' + currPage + '     pageSize:' + pageSize);
            }
        });
        $("#pagination_9").pagination({
            totalPage: 18,
            isResetPage: true,
            callBack: function (currPage, pageSize) {
                console.log('currPage:' + currPage + '     pageSize:' + pageSize);
            }
        });
        $("#btn_9").click(function () {
            var currPage = +$("input[name='currPage_9']").val();
            var totalPage = +$("input[name='totalPage_9']").val();
            $("#pagination_9").pagination('setPage', currPage, totalPage);
            console.log($("#pagination_9").pagination('getPage'));
        });
        $("#pagination_10").pagination({
            css: 'css-2',
            totalPage: 18,
            callBack: function (currPage, pageSize) {
                console.log('currPage:' + currPage + '     pageSize:' + pageSize);
            }
        });
        $("#pagination_11").pagination({
            css: 'css-3',
            totalPage: 18,
            callBack: function (currPage, pageSize) {
                console.log('currPage:' + currPage + '     pageSize:' + pageSize);
            }
        });
        $("#pagination_12").pagination({
            css: 'css-4',
            totalPage: 18,
            callBack: function (currPage, pageSize) {
                console.log('currPage:' + currPage + '     pageSize:' + pageSize);
            }
        });
        $("#pagination_13").pagination({
            css: 'css-5',
            totalPage: 18,
            callBack: function (currPage, pageSize) {
                console.log('currPage:' + currPage + '     pageSize:' + pageSize);
            }
        });
        $("#pagination_14").pagination({
            css: 'css-5',
            totalPage: 18,
            showPageNum: 0,
            isShowFL: false,
            isShowPageSizeOpt: false,
            isShowSkip: false,
            isShowRefresh: true,
            isShowTotalPage: false,
            isResetPage: false,
            callBack: function (currPage, pageSize) {
                console.log('currPage:' + currPage + '     pageSize:' + pageSize);
            }
        });
        $("#pagination_15").pagination({
            css: 'css-2',
            totalPage: 18,
            previousPage: '<',
            nextPage: '>',
            isShowFL: false,
            isShowPageSizeOpt: false,
            isShowSkip: false,
            isShowRefresh: false,
            isShowTotalPage: false,
            isResetPage: false,
            callBack: function (currPage, pageSize) {
                console.log('currPage:' + currPage + '     pageSize:' + pageSize);
            }
        });
        $("#pagination_16").pagination({
            css: 'css-4',
            totalPage: 18,
            showPageNum: 3,
            previousPage: '<',
            nextPage: '>',
            isShowFL: false,
            isShowPageSizeOpt: false,
            isShowSkip: false,
            isShowRefresh: false,
            isShowTotalPage: false,
            isResetPage: false,
            callBack: function (currPage, pageSize) {
                console.log('currPage:' + currPage + '     pageSize:' + pageSize);
            }
        });
    </script>
</body>
</html>

http://www.cnblogs.com/knowledgesea/archive/2013/01/03/2841554.html