bootstrap-table插件的应用--适合前端初学者

最新推荐文章于 2020-02-03 23:22:28 发布

Lhy@@

最新推荐文章于 2020-02-03 23:22:28 发布

阅读量340

点赞数

分类专栏： Bootstrap-table 文章标签： bootstrap-table ajax table

本文链接：https://blog.csdn.net/Lhy_JL/article/details/85705939

版权

Bootstrap-table 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

开发工具： IntelliJ IDEA 2018.2.5 (Ultimate Edition)

插件：1、bootstrap

2、jquery

3、bootstrap-table

效果图：

具体代码及步骤：

第一：添加插件，以下是本人添加的资源文件

第二：在需展示table的jsp页面编写代码

<head>
    <title>PersonalIntroduction</title>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1">
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/bootstrap-table.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-table.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-table-zh-CN.js"></script>

</head>
<body>
    <div style="margin-left: 4px;margin-right: 2px">
    <p style="color: rgb(0,0,0);text-align: center;font-size: 18px">我的积分</p>
    <table id="tb_departments" data-toggle="table" ></table>
</div>
<%--table 配置 文件--%>
<script src="${pageContext.request.contextPath}/js/EmplCreditTable.js"></script>
</body>
</html>
</body>

第三：可以看到我引入了EmplCreditTable.js文件，所以需在js文件夹下创建并编写EmplCreditTable.js

var json =  [{"Code":"1","TuanGouName":"好多鱼","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
    {"Code":"2","TuanGouName":"旺旺雪饼","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
    {"Code":"3","TuanGouName":"旺旺仙贝","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
    {"Code":"4","TuanGouName":"雪花清爽","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
    {"Code":"5","TuanGouName":"勇闯天涯","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
    {"Code":"6","TuanGouName":"旺旺雪饼","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
    {"Code":"7","TuanGouName":"旺旺仙贝","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
    {"Code":"8","TuanGouName":"雪花清爽","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
    {"Code":"9","TuanGouName":"勇闯天涯","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
    {"Code":"10","TuanGouName":"旺旺雪饼","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
    {"Code":"11","TuanGouName":"旺旺仙贝","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
    {"Code":"12","TuanGouName":"雪花清爽","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
    {"Code":"13","TuanGouName":"勇闯天涯","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"},
    {"Code":"14","TuanGouName":"九洲奇味饼干","StartDate":"2016/10/9 10:15:00","EndTime":"2016/12/25 11:30:00"}];
$('#tb_departments').bootstrapTable({
    data:json,         //请求后台的URL（*）
    dataType: 'json',
    method:'get',
    contentType: 'application/json,charset=utf-8',
    striped: true,                      //是否显示行间隔色
    cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    pagination: true,                   //是否显示分页（*）
    sortable: false,                     //是否启用排序
    sortOrder: "asc",
    //queryParams: queryParams,
    sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
    pageNumber:1,                       //初始化加载第一页，默认第一页
    pageSize: 5,                        //每页的记录行数（*）

    showRefresh: true,
    search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
    showColumns: true,                  //是否显示所有的列
    minimumCountColumns: 2,             //最少允许的列数
    clickToSelect: true,                //是否启用点击选中行
    height: 348,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
    showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
    cardView: false,                    //是否显示详细视图
    detailView: false,                   //是否显示父子表
    paginationPreText: "上一页",
    paginationNextText: "下一页",
    columns:[{
            field: 'StartDate',
            title: '时间',
        },{
            field: 'TuanGouName',
            title: '类型',
        },{
            field: 'StartDate',
            title: '描述',
        },{
            field: 'Code',
            title: '积分',
        }],
    //得到查询的参数

});

本次例子是加载自己初始的数据 json 数组，让它呈现在表格里，bootstrap-table table的属性有相应的注释。但是在实际应用中，自己初始化数据的显示用的较少，大多是读取后台数据库的表数据，然后呈现在table中，下面介绍读取后台数据库的方法。

第四：读取后台数据库+ajax

$('#tb_KindsOfRankingOfPerson').bootstrapTable({

   ajax : function(request){

       $.ajax({

           type: 'GET',
           url : '/EmployeeInformation/Get_TableData',//获取后台数据库的url
           contentType : "application/json;charset=utf-8",
           dataType : "json",
           data: {table_numb : "5672"},
           success:function (result) {//result为Get_TableData方法返回的数据
               console.log(result);
               request.success({
                   row : result,
               });
               $("#tb_KindsOfRankingOfPerson").bootstrapTable('load',result);
           },
           error:function () {
               alert("错误！")
           },

       });
   },

```````````
省略基本设置
```````````
}

这段代码绑定的是另一个table，读者需注意！

如有不明之处，可咨询本人。