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