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 相关文章推荐
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
javascript中window.event事件用法详解
Dec 11 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
node.js中的fs.fchown方法使用说明
Dec 16 Javascript
jQuery实现的图片分组切换焦点图插件
Jan 06 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
AngularJS 依赖注入详解及示例代码
Aug 17 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 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
综合图片计数器
2006/10/09 PHP
PHP实现MySQL更新记录的代码
2008/06/07 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
php程序内部post数据的方法
2015/03/31 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
鼠标拖动实现DIV排序示例代码
2013/10/14 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
JS实现分页导航效果
2020/02/19 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
python判断链表是否有环的实例代码
2020/01/31 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
大学生水果店创业计划书
2014/01/28 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
广播体操比赛主持词
2015/06/29 职场文书
Go获取两个时区的时间差
2022/04/20 Golang
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android