bootstrap-paginator分页控件

最新推荐文章于 2025-06-29 12:33:56 发布

Jack_Joe

最新推荐文章于 2025-06-29 12:33:56 发布

阅读量345

点赞数

CC 4.0 BY-SA版权

分类专栏： bootstrap 文章标签：控件分页

本文链接：https://blog.youkuaiyun.com/qq_21253703/article/details/51995907

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用Bootstrap分页插件实现自定义分页效果。通过引用必要的库文件，设置HTML结构，并利用jQuery初始化插件，实现了带有当前页、总页数及页面大小等配置的分页功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引用文件


        <link rel="stylesheet" href="../css/bootstrapv3.css">

        <script src="../lib/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="../lib/bootstrapv3.js" type="text/javascript"></script>
        <script src="../src/bootstrap-paginator.js"></script>

2.代码

<div>
            <ul id='bp-3-element-test'></ul>
        </div>
    <script type="text/javascript">
            $(document).ready(function() {
                var element = $('#bp-3-element-test');

                var options = {
                    size: "large",
                    bootstrapMajorVersion: 3,
                    currentPage: 3,
                    numberOfPages: 5,
                    totalPages: 11
                }
                element.bootstrapPaginator(options);
            });
            </script>