您好,登錄后才能下訂單哦!
這篇文章主要講解了“vue2.0中如何利用DataTable插件實現(xiàn)表格動態(tài)刷新”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“vue2.0中如何利用DataTable插件實現(xiàn)表格動態(tài)刷新”吧!
效果如下:
可是涉及到自動刷新就有問題了,因為每次獲取數(shù)據(jù)都是全量數(shù)據(jù),用dataTable組裝表格的話,就必須要組裝好的表格destroy掉,然后再v-for再DataTable()組裝..頁面會一直一直閃!體驗好差的說!
我只想出了一個比較笨的方法解決這個局部刷新的問題,大家要是有更好的方法一定要告訴我??!上代碼!
1.v-for只渲染不變的數(shù)據(jù),比如名字備注之類的,一直刷新的字段比如狀態(tài)和完成率都為空,就這樣,只用DataTable首次渲染表格
2.setRefresh是一個定時器,每隔1s就遞歸調(diào)用一次自己,query全量數(shù)據(jù),存放到originTableList里
3.updateRefreshStatus是用原生的js去獲取每行的dom,然后innerText去改變其值
4.reportTaskComplete是當當前這個task完成率達到100%就匯報給server
5.checkTaskRefresh是遞歸檢查所有的任務(wù),把完成的任務(wù)放到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">自動刷新開關(guān):</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()">添加任務(wù)</button> </div> <div class="col-xs-12 main-table-wrapper"> <h5 class="page-header">點播刷新任務(wù)數(shù)據(jù)表格 <!-- <small>Secondary text</small> --></h5> <!-- <p>123</p> --> <table class="table table-striped table-hover table-bordered" id="main-table"> <thead> <tr> <th>名稱</th> <th>狀態(tài)</th> <th>完成率</th> <th>創(chuàng)建時間</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,//每頁顯示數(shù)量 "lengthChange": true,//是否允許用戶改變表格每頁顯示的記錄數(shù) "searching": true,//搜索 "ordering": true,//排序 "info": true,//左下角 從 1 到 5 /共 23 條數(shù)據(jù) "autoWidth": true, // "scrollX": "100%",//表格的寬度 // "scrollY": "200px",//表格的高度 "scrollXInner": "100%",//表格的內(nèi)容寬度 // "bScrollCollapse":true,//當顯示的數(shù)據(jù)不足以支撐表格的默認的高度時,依然顯示縱向的滾動條。(默認是false) "aaSorting": [ [3, 'asc'] ], "language": { "sInfoEmpty": "沒有數(shù)據(jù)", "sZeroRecords": "沒有查找到滿足條件的數(shù)據(jù)", "sInfo": "從 _START_ 到 _END_ /共 _TOTAL_ 條數(shù)據(jù)", "sLengthMenu": "每頁顯示 _MENU_ 條記錄", "sInfoFiltered": "(從 _MAX_ 條數(shù)據(jù)中檢索)", "oPaginate": { "sFirst": "首頁", "sPrevious": "前一頁", "sNext": "后一頁", "sLast": "尾頁" } }, }); }, initQuery: function(){ // status 和 rate兩個字段是實時刷新的 // dataTable摧毀和tableList賦值都砸在promise里完成 // tableList只初始化的時候賦值一次 然后就不動了 用原生js去改變表格內(nèi)的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全部執(zhí)行完畢:' + JSON.stringify(result)); // ["Hello", "World"] //renderTable函數(shù)只在首次進入頁面時調(diào)用 1.毀掉dataTable插件 2.加載一次表格更新狀態(tài)和完成率 3.調(diào)用自動刷新 mySelf.renderTable(); mySelf.updateRefreshStatus(); mySelf.setRefresh(); }); }, switchRefreshStatus: function(){ let mySelf = this; let status = mySelf.refresh.status; let text = (status==true)?'關(guān)閉':'開啟'; 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){ // 若任務(wù)完成列表 沒有這個TaskId 則發(fā)送請求 if (!completeTaskList.includes(item.id)){ console.log(item.id + "任務(wù)完成了!并且不存在于任務(wù)完成列表,現(xiàn)在發(fā)送完成請求!"); mySelf.reportTaskComplete(item.id); mySelf.refresh.completeTaskList.push(item.id); } } else{ taskAllComplete = false; } }); if(taskAllComplete){ console.log('全部任務(wù)都完成了!') return true; } return false; }, setRefresh: function(){ let mySelf = this; let status = mySelf.refresh.status; let interval = mySelf.refresh.interval; // 如果所有任務(wù)都完成了 則停止發(fā)送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全部執(zhí)行完畢:' + JSON.stringify(result)); // ["Hello", "World"] mySelf.updateRefreshStatus(); mySelf.setRefresh(); }); },interval); } else{ mySelf.clearRefresh(); } }, updateRefreshStatus: function(){ console.log('更新刷新狀態(tài)') 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',"接口調(diào)用失敗,報錯信息為:" + 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(); },
整體的效果如下,功能整體是實現(xiàn)了,但是感覺好笨的說,大家要是有好辦法一定要告訴我哈!!
感謝各位的閱讀,以上就是“vue2.0中如何利用DataTable插件實現(xiàn)表格動態(tài)刷新”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對vue2.0中如何利用DataTable插件實現(xiàn)表格動態(tài)刷新這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。