vue2.0结合DataTable插件实现表格动态刷新的方法详解       这篇文章主要介绍了vue2.0结合DataTable插件实现表格动态刷新的方法,结合具体项目实例形式分析了vue2.0结合DataTable插件实现表格动态刷新过程中遇到的问题与相应的解决方法,需要的朋友可以参考下

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

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

我这边使用的是框架是vue，表格自然用v-for渲染，然后我们这边分页搜索神马的都是前端弄，也就是说后端只管把一大坨数据塞到前端，然后前端自己组装分页器和完成模糊搜索，所以啊，我之前用的是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.pleteTaskList，如果全都完成了就把定时器清除掉

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

template

 template 
 div 
 loadingHourGlass /loadingHourGlass 
 div 
 div 
 strong 自动刷新开关: /strong 
 iphoneSwitcher v-bind:status="refresh.status" v-bind:canSwitch="false" v-bind:callBackName="'switchRefreshStatus'" /iphoneSwitcher 
 /div 
 button type="button" v-on:click="editRecord()" 添加任务 /button 
 /div 
 div 
 h4 点播刷新任务数据表格 !-- small Secondary text /small -- /h4 
 !-- p 123 /p -- 
 table id="main-table" 
 thead 
 th 名称 /th 
 th 状态 /th 
 th 完成率 /th 
 th 创建时间 /th 
 th 备注 /th 
 th 操作 /th 
 /tr 
 /thead 
 tbody !-- v-bind:class=" (pleteCount/item.total=='1') 'ess':'text-danger' " -- 
 tr v-for="item in tableList" v-bind:class="'id-' + item.id" 
 td {{ item.file_name }} /td 
 !-- {{ item.status | statusFilter }} -- 
 td /td 
 !-- v-bind:class=" (pleteCount/item.total=='1') 'ess':'text-danger' " -- 
 !-- {{ pleteRate }} -- 
 td /td 
 td {{ item.create_time }} /td 
 td {{ item.description }} /td 
 button type="button" v-on:click="showDetailModal(item.id,item.file_name)" 详情 /button 
 !-- button type="button" 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%",//表格的内容宽度
 // "bScrollColla凡科抠图e":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){
 pleteTaskList = pleteTaskList;
 pleteRate = pleteRate;
 //当前task完成 report给后端
 if (pleteRate) == 1){
 // 若任务完成列表 没有这个TaskId 则发送请求
 if (!completeTaskList.includes(item.id)){
 console.log(item.id + "任务完成了！并且不存在于任务完成列表，现在发送完成请求！");
 mySelf.reportTaskComplete(item.id);
 pleteTaskList.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 = pleteRate;
 tdRate.className = (item.status == "1") " rate":((item.status == "2") "ess rate":"text-danger rate");
 tdStatus.innerText = (item.status == "1") "刷新中":((item.status == "2") "刷新完成":"刷新失败");
 tdStatus.className = (item.status == "1") " status":((item.status == "2") "ess 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){
  = ;
 pleteCount = pleteCount;
 let total = info.count;
 pleteRate = ((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();

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

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