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

开发工具: 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,读者需注意!

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值