Bootstrap Table的使用

最新推荐文章于 2025-05-29 11:56:13 发布

浪里xiao白龙

最新推荐文章于 2025-05-29 11:56:13 发布

阅读量1.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： Bootstrap Table 前端

本文链接：https://blog.youkuaiyun.com/suewar3/article/details/90724687

在毕业设计中，作者发现Bootstrap Table是展示后台数据的强大表格组件。本文详细介绍了两种使用方式：仅使用table标签和结合js实现翻页功能，并提供了Controller层的相关代码。

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

最近在做毕业设计，需要在前台把后台的数据用表格显示出来，发现一款表格组件神器–Bootstrap Table, 这次记录下来，方便以后使用。

1.第一种

只是用到table标签

注意：data-url的路径和data-method是controller层的@PostMapping
<table id="mytable" data-toggle="table"
           data-url="/test" data-method="post"
           data-query-params="queryParams" data-toolbar="#toolbar"
            data-search="true" data-show-refresh="true"
           data-show-toggle="true" data-show-columns="true"
           data-page-list="[2,4,8,16,ALL]" data-pagination="true">
        <thead>
        <tr>
            <th width="70" data-field="id">id</th>
            <th width="70" data-field="studentId">studentId</th>
            <th width="94" data-field="password">password</th>
        </thead>
    </table>