当前位置： 移动技术网 > IT编程>开发语言>JavaScript > bootstrapTable+ajax加载数据 refresh更新数据

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

2018年09月24日  | 移动技术网IT编程  | 我要评论

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网