bootstrap-table表格实现

最新推荐文章于 2023-02-14 16:30:18 发布

编程周记

最新推荐文章于 2023-02-14 16:30:18 发布

阅读量1k

点赞数

分类专栏：前端文章标签： bootstrap css html

本文链接：https://blog.csdn.net/x18094/article/details/122247780

版权

前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

方式一：jquery+bootstrap

不足：分页能力不行

效果：

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.min.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/bootstrap-3.3.7/css/bootstrap.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/common.css}">
    <script type="text/javascript" th:src="@{/bootstrap/bootstrap-3.3.7/js/bootstrap.js}"></script>
</head>
<body>
<div class="block-title">秒杀商品列表</div>
<div class="panel panel-default"  style="margin: 10px;">
<!--    带边框的表格 class="table table-bordered"-->
    <table class="table table-bordered " id="goodsList">
           <tr>
              <th>ID</th>
              <th>姓名</th>
              <th>年龄</th>
              <th>操作栏</th>
           </tr>
        <tr th:each="item : ${dataList}">
                 <td th:text="${item.id}" ></td>
                 <td th:text="${item.name}"></td>
                 <td th:text="${item.age}"></td>
                 <td><a th:href="'/goods/toDetail/'+${item.id}">详情</a> </td>
        </tr>
    </table>
</div>

</body>
</html>

common.css

.market-block-title{
    font-size: 16px;
    text-shadow: rgb(0, 0, 0, 15%) 0 0 1px;
    padding-left: 5px;
    margin: .8rem .6rem;
    border-left: 3px solid #39b6e5;
}
.block-title {
    font-size: 20px;
    margin-bottom: 10px;
    clear: both;
    margin-top: 30px;
    border-left: 5px solid #20a0ff;
    padding-left: 5px;
    padding-bottom: 10px;
}

th{
    /*background-color: #EEF1F6 !important;*/
    background-color:  #EEF1F6  !important;;
    text-align: center;
}
td{
    text-align: center;
}

/*分页总条数*/
.el-pagination__total {
    display: inline-block;
    font-size: 13px;
    min-width: 28px;
    height: 28px;
    line-height: 28px;
    vertical-align: top;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    ine-height: 1.25;
}


.pull-left {
    float: right !important;
    margin-left: 8px;
}

方式二：jquery+bootstrap+bootstrap-table

效果：

前端分页

testList.html

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <script type="text/javascript" th:src="@{/js/jquery/jquery-3.3.1.min.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/bootstrap-3.3.7/css/bootstrap.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/bootstraptable/bootstrap-table.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/common.css}">
    <script type="text/javascript" th:src="@{/bootstrap/bootstrap-3.3.7/js/bootstrap.js}"></script>
   <!-- bootstrap-table要在bootstrap后面引入-->
    <script type="text/javascript" th:src="@{/bootstrap/bootstraptable/bootstrap-table.js}"></script>
    <script type="text/javascript" th:src="@{/bootstrap/bootstraptable/bootstrap-table-zh-CN.js}"></script>
</head>
<body>
<div class="block-title">秒杀商品列表</div>
<div class="panel panel-default"  style="margin: 10px;">
</div>
<div style="margin: 10px">
    <table id="mytable" ></table>
</div>

</body>
<script type="text/javascript">
    $(document).ready(function () {
        $("#mytable").bootstrapTable({
            url:"/hello3",  //请求地址
            striped : true, //是否显示行间隔色
            pageNumber : 1, //初始化加载第一页
            pagination : true,//是否分页
            sidePagination : 'client',//server:服务器端分页|client：前端分页
            pageSize : 4,//单页记录数
            pageList : [ 5, 10],//可选择单页记录数
            showRefresh : false,//刷新按钮
            pageInfo:"22",
            columns : [ {
                title : 'id',
                field : 'id',
                sortable : true
            }, {
                title : '姓名',
                field : 'name',
                sortable : true
            }, {
                title : '年龄',
                field : 'age',
                sortable : true
            },{
                title : '性别',
                field : 'sex',
                sortable : true
            }]
        })
    })

</script>
</html>

后台：

   @RequestMapping("/hello2")
    public String hello2(Model model) {

        List<Hello> list = new ArrayList<>();
        for(int i=1;i<=10;i++){
            Hello hello = new Hello();
            hello.setName("Jack");
            hello.setAge(18);
            hello.setId(i);
            list.add(hello);
        }
        model.addAttribute("dataList",list);
        return "testList";
}