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

发布时间：2020-12-18 00:31:51 所属栏目：安全来源：网络整理

导读：本文实例为大家分享了bootstrapTable+ajax加载数据，和refresh更新数据两部分，供大家参考，具体内容如下 1.html 2.js 3.刷新表格 4.bootstrap-datatimepick日期时间插件，日期changeDate事件 5.在最后添加"操作"列，实现查看"详情"操作 " } }] 以上就是本文

本文实例为大家分享了bootstrapTable+ajax加载数据，和refresh更新数据两部分，供大家参考，具体内容如下

1.html

2.js

//日期时间格式化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"
  }]
});

});

3.刷新表格

4.bootstrap-datatimepick日期时间插件，日期changeDate事件

5.在最后添加"操作"列，实现查看"详情"操作

" } } ]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!