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

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

您可能感兴趣的文章:

• BootstrapTable refresh 方法使用实例简单介绍
• Bootstrap table中toolbar新增条件查询及refresh参数使用方法
• BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
• Bootstrap的Refresh Icon也spin起来
• bootstrap select2插件用ajax来获取和显示数据的实例
• 使用vue框架 Ajax获取数据列表并用BootStrap显示出来
• Bootstrap进度条与AJAX后端数据传递结合使用实例详解
• bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
• 使用Bootstrap Tabs选项卡Ajax加载数据实现
• DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）