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

<form role="form"> <div> <label for="calendar">日期</label> <div> <input type="text" value="2018-06-13"> </div> </div> <div> <label for="types">时间类别</label> <div> <select> <option value="week">week</option> <option value="month">month</option> <option value="sixmonth">sixmonth</option> </select> </div> </div> </form> <div> <table 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>详情</button>" } } ]