bootstrapTable+ajax加载数据 refresh更新数据
(编辑:jimmy 日期: 2024/11/15 浏览:3 次 )
本文实例为大家分享了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>" } } ]
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:基于vue循环列表时点击跳转页面的方法