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


Posted in Javascript onAugust 31, 2018

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
alert和confirm功能介绍
May 21 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
再谈javascript原型继承
Nov 10 Javascript
Javascript访问器属性实例分析
Dec 30 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 #Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 #Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 #Javascript
angular1.x ui-route传参的三种写法小结
Aug 31 #Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 #Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 #Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 #Javascript
You might like
php+xml结合Ajax实现点赞功能完整实例
2015/01/30 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
mac os快速切换多个PHP版本的方法
2017/03/07 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
纯js实现瀑布流展现照片(自动适应窗口大小)
2013/04/08 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
深入理解Promise.all
2018/08/08 Javascript
微信小程序批量监听输入框对按钮样式进行控制的实现代码
2019/10/12 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
python线程池的实现实例
2013/11/18 Python
Python去掉字符串中空格的方法
2014/03/11 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
浅谈五大Python Web框架
2017/03/20 Python
python之PyMongo使用总结
2017/05/26 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
python将dict中的unicode打印成中文实例
2020/05/11 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
专升本自我鉴定
2013/10/10 职场文书
学习两会精神心得范文
2014/03/17 职场文书
小学数学课后反思
2014/04/23 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js
Mysql排查分析慢sql之explain实战案例
2022/04/19 MySQL