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

本文介绍了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}"
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值