首页 > 开发 > AJAX > 正文

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

2024-09-01 08:33:58
字体:
来源:转载
供稿:网友

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VeVb武林网。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表