vue2.0结合DataTable插件实现表格动态刷新的方法详解


Posted in Javascript onMarch 17, 2017

本文实例讲述了vue2.0结合DataTable插件实现表格动态刷新的方法。分享给大家供大家参考,具体如下:

产品提出的需求是这样的,很普通的一个统计server端task完成率和状态的表格,要自动刷新其中的数据,并且当单个task完成的时候report给server端,看起来好easy好easy的一个需求啊!且听我说完哈!

我这边使用的是框架是vue,表格自然用v-for渲染,然后我们这边分页搜索神马的都是前端弄,也就是说后端只管把一大坨数据塞到前端,然后前端自己组装分页器和完成模糊搜索,所以啊,我之前用的是DataTable这个插件,组装好的表格效果如下,看着没毛病哈!

vue2.0结合DataTable插件实现表格动态刷新的方法详解

可是涉及到自动刷新就有问题了,因为每次获取数据都是全量数据,用dataTable组装表格的话,就必须要组装好的表格destroy掉,然后再v-for再DataTable()组装..页面会一直一直闪!体验好差的说!

我只想出了一个比较笨的方法解决这个局部刷新的问题,大家要是有更好的方法一定要告诉我!!上代码!

1.v-for只渲染不变的数据,比如名字备注之类的,一直刷新的字段比如状态和完成率都为空,就这样,只用DataTable首次渲染表格

2.setRefresh是一个定时器,每隔1s就递归调用一次自己,query全量数据,存放到originTableList里

3.updateRefreshStatus是用原生的js去获取每行的dom,然后innerText去改变其值

4.reportTaskComplete是当当前这个task完成率达到100%就汇报给server

5.checkTaskRefresh是递归检查所有的任务,把完成的任务放到completeTaskList,如果全都完成了就把定时器清除掉

6.beforeRouteLeave是vue router的方法,在离开路由之后清除计时器

template

<template>
  <div class="row">
    <loadingHourGlass></loadingHourGlass>
    <div class="col-xs-12 top-offset-15 bottom-offset-15">
      <div>
        <strong class="pull-left line-height-24 right-offset-15">自动刷新开关:</strong>
        <iphoneSwitcher v-bind:status="refresh.status" v-bind:canSwitch="false" v-bind:callBackName="'switchRefreshStatus'"></iphoneSwitcher>
      </div>
      <button type="button" class="btn btn-sm btn-primary pull-right" v-on:click="editRecord()">添加任务</button>
    </div>
    <div class="col-xs-12 main-table-wrapper">
      <h4 class="page-header">点播刷新任务数据表格 <!-- <small>Secondary text</small> --></h4>
      <!-- <p>123</p> -->
      <table class="table table-striped table-hover table-bordered" id="main-table">
        <thead>
          <tr>
            <th>名称</th>
            <th>状态</th>
            <th>完成率</th>
            <th>创建时间</th>
            <th>备注</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody><!-- v-bind:class=" (item.completeCount/item.total=='1')?'text-success':'text-danger' " -->
          <tr v-for="item in tableList" v-bind:class="'id-' + item.id">
            <td>{{ item.file_name }}</td>
            <!-- {{ item.status | statusFilter }} -->
            <td class="status"></td>
            <!-- v-bind:class=" (item.completeCount/item.total=='1')?'text-success':'text-danger' " -->
            <!-- {{ item.completeRate }} -->
            <td class="rate"></td>
            <td>{{ item.create_time }}</td>
            <td>{{ item.description }}</td>
            <td>
              <button type="button" class="btn btn-primary btn-xs" v-on:click="showDetailModal(item.id,item.file_name)">详情</button>
              <!-- <button type="button" class="btn btn-danger btn-xs" v-on:click="test()">test</button> -->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

js

methods: {
  initRecordTable: function(){
    $('#main-table').DataTable({
      "paging": true,// 开启分页
      "pageLength": 10,//每页显示数量
      "lengthChange": true,//是否允许用户改变表格每页显示的记录数
      "searching": true,//搜索
      "ordering": true,//排序
      "info": true,//左下角 从 1 到 5 /共 23 条数据
      "autoWidth": true,
      // "scrollX": "100%",//表格的宽度
      // "scrollY": "200px",//表格的高度
      "scrollXInner": "100%",//表格的内容宽度
      // "bScrollCollapse":true,//当显示的数据不足以支撑表格的默认的高度时,依然显示纵向的滚动条。(默认是false)
      "aaSorting": [
        [3, 'asc']
      ],
      "language": {
        "sInfoEmpty": "没有数据",
        "sZeroRecords": "没有查找到满足条件的数据",
        "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
        "sLengthMenu": "每页显示 _MENU_ 条记录",
        "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
        "oPaginate": {
          "sFirst": "首页",
          "sPrevious": "前一页",
          "sNext": "后一页",
          "sLast": "尾页"
        }
      },
    });
  },
  initQuery: function(){
    // status 和 rate两个字段是实时刷新的
    // dataTable摧毁和tableList赋值都砸在promise里完成
    // tableList只初始化的时候赋值一次 然后就不动了 用原生js去改变表格内的status字段
    let mySelf = this;
    let callback = function(){
      if($('#main-table').DataTable()){
        $('#main-table').DataTable().destroy()
      }
      mySelf.tableList = util.deepClone(mySelf.originTableList);
    }
    let queryTablePromise = mySelf.queryTable(callback);
    let promiseList = [];
    mySelf.clearRefresh();
    promiseList.push(queryTablePromise);
    Promise.all(promiseList).then(function (result) {
      console.log('ajax全部执行完毕:' + JSON.stringify(result)); // ["Hello", "World"]
      //renderTable函数只在首次进入页面时调用 1.毁掉dataTable插件 2.加载一次表格更新状态和完成率 3.调用自动刷新
      mySelf.renderTable();
      mySelf.updateRefreshStatus();
      mySelf.setRefresh();
    });
  },
  switchRefreshStatus: function(){
    let mySelf = this;
    let status = mySelf.refresh.status;
    let text = (status==true)?'关闭':'开启';
    let confirmCallback = null;
    if (status==true){
      confirmCallback = function(){
        mySelf.refresh.status = false;
      }
    }
    else{
      confirmCallback = function(){
        mySelf.refresh.status = true;
        mySelf.setRefresh();
      }
    }
    util.showConfirm('确认要' + text + '自动刷新么?',confirmCallback);
  },
  checkTaskRefresh: function(){
    let mySelf = this;
    let originTableList = mySelf.originTableList;
    let taskAllComplete = true;
    // console.log(JSON.stringify(mySelf.originTableList));
    originTableList.forEach(function(item,index,array){
      let completeTaskList = mySelf.refresh.completeTaskList;
      let completeRate = item.completeRate;
      //当前task完成 report给后端
      if (Number.parseInt(completeRate) == 1){
        // 若任务完成列表 没有这个TaskId 则发送请求
        if (!completeTaskList.includes(item.id)){
          console.log(item.id + "任务完成了!并且不存在于任务完成列表,现在发送完成请求!");
          mySelf.reportTaskComplete(item.id);
          mySelf.refresh.completeTaskList.push(item.id);
        }
      }
      else{
        taskAllComplete = false;
      }
    });
    if(taskAllComplete){
      console.log('全部任务都完成了!')
      return true;
    }
    return false;
  },
  setRefresh: function(){
    let mySelf = this;
    let status = mySelf.refresh.status;
    let interval = mySelf.refresh.interval;
    // 如果所有任务都完成了 则停止发送ajax请求 并更新最后一次
    if (mySelf.checkTaskRefresh()){
      console.log('更新最后一次表格!')
      mySelf.updateRefreshStatus();
      return false;
    }
    // console.log('refresh')
    if (status){
      mySelf.refresh.timer = setTimeout(function(){
        let queryTablePromise = mySelf.queryTable();
        let promiseList = [];
        promiseList.push(queryTablePromise);
        Promise.all(promiseList).then(function (result) {
          console.log('ajax全部执行完毕:' + JSON.stringify(result)); // ["Hello", "World"]
          mySelf.updateRefreshStatus();
          mySelf.setRefresh();
        });
      },interval);
    }
    else{
      mySelf.clearRefresh();
    }
  },
  updateRefreshStatus: function(){
    console.log('更新刷新状态')
    let mySelf = this;
    let mainTable = document.getElementById("main-table");
    let originTableList = mySelf.originTableList;
    originTableList.forEach(function(item,index,array){
      let trClassName = "id-" + item.id;
      // console.log(trClassName)
      // 获取当前页面展示的所有tr
      let trDom = mainTable.getElementsByClassName(trClassName)[0];
      // console.log(trDom)
      // 局部刷新个别字段
      if (trDom){
        let tdRate = trDom.getElementsByClassName("rate")[0];
        let tdStatus = trDom.getElementsByClassName("status")[0];
        tdRate.innerText = item.completeRate;
        tdRate.className = (item.status == "1")?"text-info rate":((item.status == "2")?"text-success rate":"text-danger rate");
        tdStatus.innerText = (item.status == "1")?"刷新中":((item.status == "2")?"刷新完成":"刷新失败");
        tdStatus.className = (item.status == "1")?"text-info status":((item.status == "2")?"text-success status":"text-danger status");
      }
    });
  },
  clearRefresh: function(){
    let mySelf = this;
    console.log('clear timer');
    clearTimeout(mySelf.refresh.timer);
  },
  queryTable: function(callback){
    let mySelf = this;
    let promise = new Promise(function (resolve, reject) {
      let url = pars.domain + "/api.php?Action=xxxxxxx&t=" + (new Date).getTime();
      $.get(url, function(res) {
        if (res.code == 0) {
          let resData = res.list;
          resData.forEach(function(item,index,array){
            let info = item.info;
            let completeCount = info.completeCount;
            let total = info.count;
            item.completeRate = ((completeCount/total)*100).toFixed(2) + "%";
          });
          // console.log(JSON.stringify(resData))
          mySelf.originTableList = resData;
          if (callback){
            callback();
          }
          resolve('queryTable完成!');
        }
        else{
          util.showDialog('error',"接口调用失败,报错信息为:" + res.message);
        }
      }, "json");
    });
    return promise;
  },
  renderTable: function(){
    let mySelf = this;
    mySelf.$nextTick(function(){
      mySelf.initRecordTable();
      util.hideLoading();
    })
  }
},
beforeRouteLeave (to, from, next){
  let mySelf = this;
  mySelf.clearRefresh();
  next();
},

整体的效果如下,功能整体是实现了,但是感觉好笨的说,大家要是有好办法一定要告诉我哈!!

vue2.0结合DataTable插件实现表格动态刷新的方法详解

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
eval的两组性能测试数据
Aug 17 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
js读取本地文件的实例
Dec 22 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 Javascript
JavaScript 反射学习技巧
Oct 16 Javascript
AngularJS路由切换实现方法分析
Mar 17 #Javascript
js判断是否是手机页面
Mar 17 #Javascript
Angular组件化管理实现方法分析
Mar 17 #Javascript
Bootstrap表单制作代码
Mar 17 #Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 #Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 #Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
Mar 17 #Javascript
You might like
处理单名多值表单的详解
2013/06/08 PHP
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
详解JavaScript中数组的reduce方法
2016/12/02 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
[02:50]【扭转乾坤,只此一招】DOTA2永雾林渊版本开启新篇章
2020/12/22 DOTA
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
实用自动化运维Python脚本分享
2018/06/04 Python
python买卖股票的最佳时机(基于贪心/蛮力算法)
2019/07/05 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
公司部门司机岗位职责
2014/01/03 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
商场消防演习方案
2014/02/12 职场文书
护士节策划方案
2014/05/19 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
党员电教片《信仰》心得体会
2016/01/15 职场文书
工作建议书范文
2019/07/08 职场文书
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js