bootstrapTable+ajax加载数据，refresh更新数据

1.html

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="calendar" class="col-sm-1 control-label">日期</label>
        <div class="col-sm-3">
            <input type="text" id="calendar" class="form-control" value="2018-06-13" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label for="types" class="col-sm-1 control-label">时间类别</label>
        <div class="col-sm-3">
            <select name="" id="types" class="form-control">
                <option value="week">week</option>
                <option value="month">month</option>
                <option value="sixmonth">sixmonth</option>
            </select>
        </div>
    </div>
</form>
<div class="tableDisplay" id="dataTable">
    <table class="table table-bordered" width="100%" style="margin-bottom:0px;" data-height="460">
    </table>
</div>

2.js

<script>
    //日期时间格式化20180613
    function dateFormat(time){
        //time = 2018-06-13;
        var splitArr = time.split('-'),
            newStr = splitArr.join('');
        return newStr;
    }
    $(document).ready(function() {
        //启动日期插件
        $('#calendar').datetimepicker({
            language:  'zh-CN',
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        });
        //日期改变时刷新table;
        $('#calendar').on('changeDate', function(ev){
            $dataTableHot.bootstrapTable('refresh');
        });

        var type=$("#types option:selected").val();
        $("#types").change(function(){
            type = $("#types option:selected").val();
            $dataTableHot.bootstrapTable('refresh');
        })
        var $dataTableHot = $("#dataTable table").bootstrapTable({
            search: false,
            pagination: true,
            pageSize: 15,
            pageList: [5, 10, 15, 20],
            showColumns: true,
            showRefresh: false,
            locale: "zh-CN",
            striped: true,
            toggle:true,
            ajax:function(request) {
                $.ajax({
                    url:"http://127.0.0.1:8080/getdata",
                    type:"GET",
                    dataType:"json",
                    data:{
                        date:dateFormat($("#calendar").val()),    //dateFormat($("#calendar").val())
                        type:type,
                        value:"hot",
                        order:"asc"
                    },
                    success:function(data){
                        request.success({
                            row : data
                        });
                        $('#dataTable table').bootstrapTable('load', data);
                    },
                    error:function(error){
                        console.log(error);
                    }
                })
            },
            columns:[{
                field: "projectId",
                title:"projectId"
            },{
                field: "projectName",
                title:"projectName"
            }, {
                field: "value",
                title:"value"
            }]
        });

    });

</script>

3.刷新表格

   $dataTableHot.bootstrapTable('refresh);

4.bootstrap-datatimepick日期时间插件，日期changeDate事件

   $("#canlendar").on('changeDate',function(ev){  ...  });

5.在最后添加"操作"列，实现查看"详情"操作 

columns:[...,
    {
        title:"操作",
        events:{     //为按钮添加事件
            "click #details":function(e,value,row,index){
                alert("项目名称："+row.projectName);
            }
        },
        formatter:function(value,row,index){     //把需要创建的按钮封装在函数中
            return "<button class='btn btn-default' id="details">详情</button>"
        }
     }
]