jquery分页插件bootstrap

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery分页插件bootstrap 的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset='gb2312'>
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-2.0.3.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.js" type="text/javascript"></script>
    <script src="js/jquery.twbsPagination.js" type="text/javascript"></script>
    <script src="js/zzsc.js" type="text/javascript"></script>
    <title>jquery��ҳ���bootstrap</title>
</head>

<body>
    <br>
    <div id="content-wrapper">
        <div class="inner clearfix">
            <section id="main-content">

                <p>
                    <div class="text-center">
                        <ul id="pagination-demo" class="pagination-sm"></ul>
                    </div>
                </p>

                <div class="text-center">
                    <ul id="pagination-demo-v1_0" class="pagination-sm"></ul>
                </div>

                <div class="text-center">VS</div>

                <div class="text-center">
                    <ul id="pagination-demo-v1_1" class="pagination-sm"></ul>
                </div>

                <div class="text-center">
                    <ul id="visible-pages-example"></ul>
                </div>

            </section>

        </div>
    </div>
</body>
</html>

JS代码(zzsc.js):

$(document).ready(function (){
	$('#pagination-demo').twbsPagination({
	totalPages:35,visiblePages:7,version:'1.1',onPageClick:function (event,page){
	$('#page-content').text('Page ' + page);
}
}
);
	$('#navigation').affix({
	offset:{
	top:200}
}
);
	$('#pagination-demo-v1_0').twbsPagination({
	totalPages:15,version:'1.0'}
);
	$('#pagination-demo-v1_1').twbsPagination({
	totalPages:15,version:'1.1'}
);
	$('#visible-pages-example').twbsPagination({
	totalPages:35,visiblePages:10,version:'1.1'}
);
}
);

附件:下载该文件资源,减少时间成本(增值服务)