Bootstrap5 分页

Bootstrap5 分页

网页开发过程,如果碰到内容过多,一般都会做分页处理。

Bootstrap 5 可以很简单的实现分页效果。

要创建一个基本的分页可以在 <ul> 元素上添加 .pagination 类。然后在 <li> 元素上添加 .page-item 类,<li> 元素的 <a> 标签上添加 .page-link 类:

实例

<ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul>

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap Treetable 不支持自带分页功能,但可以与其他分页插件结合使用。以下是一个示例: 1. 首先,在 HTML 页面中引入 Bootstrap Treetable 和分页插件的 CSS 和 JS 文件。 ``` <!-- Bootstrap Treetable --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-treetable/1.2.0/bootstrap-treetable.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-treetable/1.2.0/bootstrap-treetable.min.js"></script> <!-- 分页插件(这里以 bootstrap-paginator 为例) --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-paginator/2.2.5/bootstrap-paginator.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-paginator/2.2.5/bootstrap-paginator.min.js"></script> ``` 2. 在 HTML 页面中创建一个表格容器,并初始化 Bootstrap Treetable。 ``` <div id="table-container"></div> <script> $(function() { $('#table-container').bootstrapTreeTable({ // 配置项 }); }); </script> ``` 3. 在初始化的回调函数中,使用分页插件对数据进行分页,并更新表格数据。 ``` $(function() { $('#table-container').bootstrapTreeTable({ // 配置项 onInit: function(data) { // 分页插件配置 var options = { // 分页参数 currentPage: 1, totalPages: Math.ceil(data.total / data.pageSize), size: 'normal', alignment: 'center', onPageClicked: function(e, originalEvent, type, page) { // 分页回调函数 $.ajax({ url: '/api/data', dataType: 'json', data: { page: page, pageSize: data.pageSize }, success: function(data) { // 更新表格数据 $('#table-container').bootstrapTreeTable('load', data); } }); } }; // 初始化分页插件 $('#paginator').bootstrapPaginator(options); } }); }); ``` 以上是一个简单的 Bootstrap Treetable 分页示例,你可以根据自己的具体需求进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值