bootstrap-paginator分页插件

来源：互联网发布：数据分析金融分析就业编辑：程序博客网时间：2024/05/04 22:20

Bootstrap Paginator是一款基于Bootstrap的js分页插件，功能很丰富。
官网地址：http://bootstrappaginator.org/ （需翻墙）

需引入文件：

<link rel="stylesheet" href="css/bootstrapv3.css"><script src="js/jquery-2.1.0.js" type="text/javascript"></script><script src="js/bootstrap-paginator.js"></script><script src="js/qunit-1.11.0.js"></script>

示例代码：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>Bootstrap Paginator V3 Tests</title>        <link rel="stylesheet" href="css/bootstrapv3.css">        <script src="js/jquery-2.1.0.js" type="text/javascript"></script>    </head>    <body>        <div>            <ul id='bp-3-element-test'></ul>        </div>        <script src="js/bootstrap-paginator.js"></script>        <script src="js/qunit-1.11.0.js"></script>        <script>            $(function() {                test("Test bootstrap v3 rendering", function() {                    var element = $('#bp-3-element-test');                    var options = {                        bootstrapMajorVersion: 3,//bootstrap版本                        currentPage: 1,//起始页                        numberOfPages: 5,//每页显示几个页码                        totalPages: sumPage//总共页数                    }                    element.bootstrapPaginator(options);                    ok(element.hasClass('pagination-sm'), "Root element should have pagination-sm class");                })                $('ul').on('click', function(){                    myPage = $(this).find('li.active a').html();//当前页码                    $.ajax({                        type:"get",                        url: "http://localhost:8080/customer/list/" + myPage,                        dataType:"json",                        contentType:"application/x-www-form-urlencoded;charset=utf-8",                        timeout:5000,                        success:function(data){                            console.log(data)                            //向DOM添加数据                        },                        error:function(status, statusText){                            alert('请求失败');                        }                    });                })            });        </script>    </body></html>

github下载：
DownloadVisit Project in GitHub

阅读全文

0 0