bootstrap-table表格分页简单使用

最新推荐文章于 2024-02-25 20:50:31 发布

Hzzzz_zzzzz

最新推荐文章于 2024-02-25 20:50:31 发布

阅读量8.8k

点赞数

本文链接：https://blog.youkuaiyun.com/Zoey_J/article/details/89342667

版权

本文介绍如何使用Bootstrap Table插件创建可分页的表格，包括引入JS和CSS库、配置基本属性及常见问题。Bootstrap Table方便地实现了表格分页功能，但需注意其一次性加载所有数据可能导致的性能问题。

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

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

下载解压之后的内容如下：
在这里插入图片描述
下载之后引入:
主要引入的是 dist/bootstrap-table.css、dist/bootstrap-table.js 和 dist/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.youkuaiyun.com/rickiyeat/article/details/56483577

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