本文实例为大家分享了bootstraptable+ajax加载数据，和refresh更新数据两部分，供大家参考，具体内容如下
1.html
日期
时间类别
week
month
sixmonth
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.刷新表格
$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 "详情"
}
}
]
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！