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

本文实例为大家分享了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>