关于bootstrap-table的分页插件入门的简单使用记述-个人学习总结

最新推荐文章于 2024-05-05 02:18:16 发布

还没出道的程序猿

最新推荐文章于 2024-05-05 02:18:16 发布

阅读量325

点赞数 1

分类专栏：框架

本文链接：https://blog.csdn.net/weixin_41902758/article/details/89957335

版权

本文介绍了Bootstrap-table插件的基本使用，包括客户端分页和服务器端分页的实现。Bootstrap-table是一款功能丰富的表格插件，适用于业务系统开发中的查询、分页、排序等需求。客户端分页将所有数据一次性加载到前端，根据每页记录数自动分页；服务器端分页则根据当前页码和每页记录数向服务器请求数据。文章详细讲解了如何通过HTML5属性和JavaScript设置分页参数，并展示了代码示例。

摘要由CSDN通过智能技术生成

1、bootstrap-table的介绍

在业务系统开发中，对表格记录的查询、分页、排序等处理是非常常见的，在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本随笔介绍这个bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、移动列位置等一些特殊的功能，插件可以用基于HTML5的data-*属性标识设置，也可以使用Javascript方式进行设置，非常方便。

二、怎么使用Bootstrap-table？
他分为客户端的分页和服务端的分页，

客户端模式：指的是在服务器中把要显示到表格的数据一次性加载出来，然后转换成JSON格式传到要显示的界面中，简单地说就是用他像ajax那样去访问后天的url，然后查询出来的数据在以JSON的格式返回到前台页面，然后在前台展示，客户端模式较为简单，它是把数据一次性加载出来放到界面上，然后根据你设置的每页记录数，自动生成分页。当点击第二页时，会自动加载出数据，不会再向服务器发送请求。同时用户可以使用其自带的搜索功能，可以实现全数据搜索。对于数据量较少的时候，可以使用这个方法。

服务器模式：指的是根据设定的每页记录数和当前要显示的页码，发送数据到服务器进行查询，然后再显示到表格中。该方法可以根据用户的需要动态的加载数据，节省了服务器的资源，但是不能使用其自带的全数据搜索功能。

要使用这个插件当然要先引入相关的文件依赖了因为他是基于bootstrap之上的插件不用多想先引bootstrap的相关文件如下：

<script src="webjars/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>

上面我用了webjars去引用了jquery，接着引入bootstrap的css：

<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">

然后就是bootstrap-table相关的文件引入：

<script type="text/javascript" th:src="@{/js/bootstrap-table.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap-table-zh-CN.min.js}"></script>
<link th:href="@{/css/bootstrap-table.css}"