Bootstrap Table的使用

在毕业设计中,作者发现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>

2.第二种

2.1
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值