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树形控件脚本代码
Jul 24 Javascript
Firefox window.close()的使用注意事项
Apr 11 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
JS实现简单抖动效果
Jun 01 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
element-ui 本地化使用教程详解
Oct 28 Javascript
从0搭建vue-cli4脚手架
Jun 17 Javascript
vue如何清除浏览器历史栈
May 25 Vue.js
基于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错误处理函数
2016/04/03 PHP
laravel config文件配置全局变量的例子
2019/10/13 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
node.js中的buffer.slice方法使用说明
2014/12/10 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
python中requests模块的使用方法
2015/04/08 Python
Python 数据结构之队列的实现
2017/01/22 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
关于多种方式完美解决Python pip命令下载第三方库的问题
2020/12/21 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
linux面试题参考答案(10)
2013/11/04 面试题
乌鸦喝水教学反思
2014/02/07 职场文书
《童年》教学反思
2014/02/18 职场文书
六五普法宣传标语
2014/10/06 职场文书
茶花女读书笔记
2015/06/29 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python
详解Spring Bean的配置方式与实例化
2022/06/10 Java/Android