Spring Boot 与 Bootstrap-table 实现商品的分页展示

最新推荐文章于 2024-03-26 22:59:33 发布

是摩卡不是抹茶呀

最新推荐文章于 2024-03-26 22:59:33 发布

阅读量2k

点赞数

分类专栏： Java进化之旅 Spring Boot Bootstrap 文章标签： Spring Boot Bootstrap-table Bootstrap Java

本文链接：https://blog.csdn.net/Mr_Mocha/article/details/89764550

版权

本文详细介绍了如何结合Spring Boot后端技术和Bootstrap-table前端组件，实现商品数据的分页显示。通过创建Controller处理HTTP请求，配置Thymeleaf模板，以及设置Bootstrap-table的参数，实现了高效且友好的用户界面。

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

注意！Bootstrap Table 和 Datatables 不是同一个东西！
要学会看官方文档，Bootstrap-table文档中关于配置项的解释已经非常详细，还附有示例！
有道无术，术尚可求，有术无道，止于术

// 分页结果数据传输对象
// 通过观察Bootstrap-Table的dataField, totalField => 我们可以知道默认参数名为'rows', 'total'
TableDTO => {
   
	List<T> rows;
	Long total;
}

formatter 结合font Awesome
formatter => <i class="glyphicon glyphicon-edit"></i>

关于导出报表：
导出使用的插件是bootstrap-table-export.js，而这个插件中使用的是tableExport.jquery.plugin插件。
后者是一个独立的表格导出插件。而前者是经过bootstrap官方将后者与bootstrap表格进行了完美的整合之后的插件。所以我们只需要使用前者即可。

首先前台加载大量数据的话，渲染会非常慢，甚至僵死超时，更不用说导出还要消耗更长的时间，所以该方案不合适
$("#datatable").bootstrapTable('refresh',{url:'/listData'});

`html文件`

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>IceStream 商品列表展示</title>

    <link rel="shortcut icon" href="/campus_shop/static/favicon.ico">

    <link rel="stylesheet" href="/campus_shop/static/plugins/bootstrap/css/bootstrap.min.css">
    <!-- 图标所需CSS -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
    <link href="https://s3-us-west-2.amazonaws.com/colors-css/2.2.0/colors.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/campus_shop/static/plugins/bootstrap-table/css/bootstrap-table.min.css">
    <link rel="stylesheet"
          href="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">

</head>

<body>

<div id="toolbar">
    <div class="form-inline" role="form">
        <div class="form-group">
            <span>页码: </span>
            <input name=

最低0.47元/天解锁文章

是摩卡不是抹茶呀

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Spring Boot 与 Bootstrap-table 实现商品的分页展示

注意！Bootstrap Table 和 Datatables 不是同一个东西！要学会看官方文档，Bootstrap-table文档中关于配置项的解释已经非常详细，还附有示例！// 分页结果数据传输对象// 通过观察Bootstrap-Table的dataField, totalField => 我们可以知道默认参数名为'rows', 'total'TableDTO => {...
复制链接

扫一扫