使用bootstrap-table实现表格功能

接个需求需要实现表格的创建，作为前端小白硬着头皮上了。

步骤：

一.使用flask搭建服务端，获取相对应的json数据，并返回

这个步骤pass

二.使用bootstrap-table

1.引入相对应文件

    <link href="../static/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"/>
    <link href="../static/bootstrap/bootstrap-table.css" rel="stylesheet"/>
    <link href="../static/bootstrap/bootstrap-datetimepicker.min.css" rel="stylesheet"/>

    <script src="../static/jquery-3.3.1.min.js"></script>
    <script src="../static/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <script src="../static/bootstrap/bootstrap-table.js"></script>
    <script src="../static/bootstrap/bootstrap-table-zh-CN.min.js"></script>
    <script src="../static/bootstrap/moment.js"></script>
    <script src="../static/bootstrap/bootstrap-datetimepicker.min.js"></script>

主要用到的是bootstrap，bootstarp-table以及bootstarp-datetimepicker
相对应的资源地址：

2.html代码编写

我的表格是通过js进行控制的。

<div class='col-sm-6'>
    <div class="form-group">
        <label>选择日期：</label>
        <!--指定 date标记-->
        <div class='input-group date' id='datetimepicker1'>
            <input type='text' id="timeData" class="form-control" onChange="getData()"/>
            <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
        </div>
    </div>
</div>
<table id="mytable">
</table>

上面包括两部分，一是时间选择器，二是table

3.js的编写

<script>
    $(document).ready(function () {
        $("#mytable").bootstrapTable({
            striped: true, //是否显示行间隔色
            search: true,
            pageNumber: 1, //初始化加载第一页
            pagination: true,//是否分页
            sidePagination: 'client',//server:服务器端分页|client：前端分页
            pageSize: 8,//单页记录数
            pageList: [5, 10],//可选择单页记录数
            // showRefresh : true,//刷新按钮
            columns: [{
                title: '标签值',
                field: 'LabelNo',
                sortable: true
            }, {
                title: '产品ID',
                field: 'ProductID',
                sortable: true
            }, {
                title: '操作ID',
                field: 'OperatorID',
                sortable: true
            }, {
                title: '批次数',
                field: 'BatchNo',
                sortable: true
            }]
        });
        $("#datetimepicker1").datetimepicker({
            minView: "month",//设置只显示到月份
            format: "yyyy-mm-dd",
            autoclose: true,
            todayBtn: true,
            pickerPosition: "bottom-left",
            locale: moment.locale('zh-cn')
        });
    });

    function getData() {
        var data = $('#timeData').val();
        $.ajax({
            type: "POST",
            async: true,
            url: '/get/data/by_csv',
            data: JSON.stringify({
                "data": data,
            }),
            dataType: 'json',
            contentType: "application/json",
            success: function (response) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
    			}})

</script>