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 相关文章推荐
JS处理VBArray的函数使用说明
May 11 Javascript
Javascript 跨域访问解决方案
Feb 14 Javascript
jquery ajax 登录验证实现代码
Sep 23 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
JavaScript日历实现代码
Sep 12 Javascript
javascript学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
JS截取字符串实例详解
Nov 24 Javascript
jquery实现页面加载效果
Feb 21 Javascript
JS实现评价的星星功能
Aug 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
PHP 处理图片的类实现代码
2009/10/23 PHP
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
详解WordPress开发中用于获取分类及子页面的函数用法
2016/01/08 PHP
PhpStorm terminal无法输入命令的解决方法
2016/10/09 PHP
PHP实现网页内容html标签补全和过滤的方法小结【2种方法】
2017/04/27 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
javascript 数组排序函数
2009/08/20 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
jquery 圆形旋转图片滚动切换效果
2011/01/19 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
Web开发之JavaScript
2012/03/29 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
vue.js 上传图片实例代码
2017/06/22 Javascript
webpack处理 css\less\sass 样式的方法
2017/08/21 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
node.js通过Sequelize 连接MySQL的方法
2020/12/28 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
TensorFlow实现模型评估
2018/09/07 Python
Python lambda表达式用法实例分析
2018/12/25 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
python编写微信公众号首图思路详解
2019/12/13 Python
Python datetime模块使用方法小结
2020/06/18 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
求职简历中个人的自我评价
2013/12/01 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
初中毕业生感言
2015/07/31 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python