bootstrap

最新推荐文章于 2023-11-14 18:34:15 发布

hhuahualala

最新推荐文章于 2023-11-14 18:34:15 发布

阅读量336

点赞数

本文链接：https://blog.youkuaiyun.com/hhuahualala/article/details/51815031

版权

bootstrap是目前很流行的一个前端框架，它兼容性好，同时兼容pc端和移动端

引入bootstrap相关js和css

<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../bootstrap-3.3.5/dist/css/bootstrap.css">
    <script src="../js/jquery-1.12.1.js"></script>
    <script src="../bootstrap-3.3.5/dist/js/bootstrap.js"></script>
    <script src="../bootstrap-3.3.5/js/bootstrap-paginator.min.js"></script><!--分页插件-->

需要的HTML文本
这里需要注意的是，每一个标签的id和class名字不要乱改，因为它对应着一些js代码和css样式。如果没有显示出效果，或者显示的效果不是自己想要的，我们可以适当进行微调。

<body>
    <div class="container">
        <!--table-hover鼠标悬停  table-striped奇偶行颜色不一样  table-condensed缩紧表格-->
    <table class="table table-bordered table-striped table-hover table-condensed">
        <thead>
            <tr><th>姓名</th><th>生日</th><th>职务</th><th>工资</th></tr>
        </thead>
        <tbody>
            <tr><td>张三</td><td>1988-02-04</td><td>经理</td><td>9000</td></tr>
            <tr><td>张三</td><td>1988-02-04</td><td>经理</td><td>9000</td></tr>
            <tr><td>张三</td><td>1988-02-04</td><td>经理</td><td>9000</td></tr>
            <tr><td>张三</td><td>1988-02-04</td><td>经理</td><td>9000</td></tr>
            <tr><td>张三</td><td>1988-02-04</td><td>经理</td><td>9000</td></tr>
        </tbody>
    </table>
        <div style="font-size: 20px;text-align: right">
            <ul class="pagination" id="pageUL"></ul>
        </div>
    </div>
</body>
</html>

相应的js代码

<script>
    var ops = {
        bootstrapMajorVersion:3, //指明使用bootstrap的版本
        currentPage:1,           //默认的页码
        numberOfPages:5,         //页面上显示的页码数
        totalPages:8,            //总页数
        onPageClicked:function(e,oevent,type,page){//点击页码，需要完成的业务
            alert("page:"+page);  //page为用户点中的页码
        }
    };

    $(function(){
        $("#pageUL").bootstrapPaginator(ops);
    });
</script>