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

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

}

}

]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。