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>

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>"
   }
  }
]

来源：https://blog.csdn.net/baidu_23054223/article/details/80830789