bootstrap-table表格分页简单使用

要使用bootstrap-table首先要引入它的js库和css库以及语言库,这些可以在GitHub上下载,也可以在官网下载。(其实是差不多的)

下载解压之后的内容如下:
在这里插入图片描述
下载之后引入:
主要引入的是 dist/bootstrap-table.cssdist/bootstrap-table.jsdist/locale/bootstrap-table-zh-CN.js 三个文件以及jquery

<script src="jquery/jquery-3.3.1.min.js"></script>

<link rel="stylesheet" href="../bootstrap-table/bootstrap-table.css">
<script src="../bootstrap-table/bootstrap-table.js"></script>
<script src="../bootstrap-table/bootstrap-table-zh-CN.js"></script>

引入之后给table加上id,然后就可以用bootstrap-table对表格进行操作了:

html(因为没有连数据库什么的所以表格内容直接写进去)
<div class="container" style="margin: 50px;">
   <table class="table table-bordered table-hover" id="tb">
       <thead>
           <tr>
               <th>
                   <input type="checkbox">
               </th>
               <th>啊啊</th>
               <th>哦哦</th>
               <th>嗯嗯</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td>
                   <input type="checkbox" class="checks">
               </td>
               <td>ve</td>
               <td>ve</td>
               <td>ve</td>
           </tr>
           <tr>
               <td>
                   <input type="checkbox" class="checks">
               </td>
               <td>ve</td>
               <td>ve</td>
               <td>ve</td>
           </tr>
           <tr>
               <td>
                   <input type="checkbox" class="checks">
               </td>
               <td>ve</td>
               <td>ve</td>
               <td>ve</td>
           </tr>
           <tr>
               <td>
                   <input type="checkbox" class="checks">
               </td>
               <td>ve</td>
               <td>ve</td>
               <td>ve</td>
           </tr>
           <tr>
               <td>
                   <input type="checkbox" class="checks">
               </td>
               <td>ve</td>
               <td>ve</td>
               <td>ve</td>
           </tr>
       </tbody>
   </table>
</div>
js
<script>
    $("#tb").bootstrapTable({
        pagination: true,   //是否显示分页条
        pageSize: 3,   //一页显示的行数
        paginationLoop: false,   //是否开启分页条无限循环,最后一页时点击下一页是否转到第一页
        pageList: [5, 10, 20]   //选择每页显示多少行,数据过少时可能会没有效果
    });
</script>

在这里插入图片描述
这只是bootstrap-table中极少的一部分内容,还有很多属性参数,具体可以查看:
https://blog.csdn.net/rickiyeat/article/details/56483577

虽然bootstrap-table用来对表格进行分页什么的很方便,但也有不少缺点。bootstrap-table的分页是将所有数据都加载完之后进行分页操作,如果数据比较少的话还是蛮适合的,但如果数据很多的话全部加载出来就会有耗流量耗空间等问题;而且它的功能实现是内部的,可操作性就比较差了,想要改变一些内容的话就没那么方便。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值