本文实例为大家分享了bootstrapTable+ajax加载数据，和refresh更新数据两部分，供大家参考，具体内容如下
1.html
2.js
//日期时间格式化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"
}]
});});
3.刷新表格
4.bootstrap-datatimepick日期时间插件，日期changeDate事件
5.在最后添加"操作"列，实现查看"详情"操作
原文链接：https://www.f2er.com/bootstrap/30569.html