vue2.0中如何利用DataTable插件實(shí)現(xiàn)表格動(dòng)態(tài)刷新
這篇文章主要講解了“vue2.0中如何利用DataTable插件實(shí)現(xiàn)表格動(dòng)態(tài)刷新”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“vue2.0中如何利用DataTable插件實(shí)現(xiàn)表格動(dòng)態(tài)刷新”吧！
10年積累的成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有新區(qū)免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
效果如下：
可是涉及到自動(dòng)刷新就有問題了，因?yàn)槊看潍@取數(shù)據(jù)都是全量數(shù)據(jù)，用dataTable組裝表格的話，就必須要組裝好的表格destroy掉，然后再v-for再DataTable()組裝..頁面會(huì)一直一直閃！體驗(yàn)好差的說！
我只想出了一個(gè)比較笨的方法解決這個(gè)局部刷新的問題，大家要是有更好的方法一定要告訴我！！上代碼！
1.v-for只渲染不變的數(shù)據(jù)，比如名字備注之類的，一直刷新的字段比如狀態(tài)和完成率都為空，就這樣，只用DataTable首次渲染表格
2.setRefresh是一個(gè)定時(shí)器，每隔1s就遞歸調(diào)用一次自己，query全量數(shù)據(jù)，存放到originTableList里
3.updateRefreshStatus是用原生的js去獲取每行的dom，然后innerText去改變其值
4.reportTaskComplete是當(dāng)當(dāng)前這個(gè)task完成率達(dá)到100%就匯報(bào)給server
5.checkTaskRefresh是遞歸檢查所有的任務(wù)，把完成的任務(wù)放到completeTaskList，如果全都完成了就把定時(shí)器清除掉
6.beforeRouteLeave是vue router的方法，在離開路由之后清除計(jì)時(shí)器
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">自動(dòng)刷新開關(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">點(diǎn)播刷新任務(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)建時(shí)間</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,//當(dāng)顯示的數(shù)據(jù)不足以支撐表格的默認(rèn)的高度時(shí)，依然顯示縱向的滾動(dòng)條。(默認(rèn)是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兩個(gè)字段是實(shí)時(shí)刷新的
// dataTable摧毀和tableList賦值都砸在promise里完成
// tableList只初始化的時(shí)候賦值一次 然后就不動(dòng)了 用原生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ù)只在首次進(jìn)入頁面時(shí)調(diào)用 1.毀掉dataTable插件 2.加載一次表格更新狀態(tài)和完成率 3.調(diào)用自動(dòng)刷新
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('確認(rèn)要' + text + '自動(dòng)刷新么？',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;
//當(dāng)前task完成 report給后端
if (Number.parseInt(completeRate) == 1){
// 若任務(wù)完成列表 沒有這個(gè)TaskId 則發(fā)送請(qǐng)求
if (!completeTaskList.includes(item.id)){
console.log(item.id + "任務(wù)完成了！并且不存在于任務(wù)完成列表，現(xiàn)在發(fā)送完成請(qǐng)求！");
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請(qǐng)求 并更新最后一次
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)
// 獲取當(dāng)前頁面展示的所有tr
let trDom = mainTable.getElementsByClassName(trClassName)[0];
// console.log(trDom)
// 局部刷新個(gè)別字段
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)用失敗，報(bào)錯(cuò)信息為：" + 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();
},整體的效果如下，功能整體是實(shí)現(xiàn)了，但是感覺好笨的說，大家要是有好辦法一定要告訴我哈！！
感謝各位的閱讀，以上就是“vue2.0中如何利用DataTable插件實(shí)現(xiàn)表格動(dòng)態(tài)刷新”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)vue2.0中如何利用DataTable插件實(shí)現(xiàn)表格動(dòng)態(tài)刷新這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
網(wǎng)站名稱：vue2.0中如何利用DataTable插件實(shí)現(xiàn)表格動(dòng)態(tài)刷新
鏈接地址：http://chinadenli.net/article42/gishhc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、微信公眾號(hào)、企業(yè)網(wǎng)站制作、軟件開發(fā)、標(biāo)簽優(yōu)化、營(yíng)銷型網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 商城網(wǎng)站模板設(shè)計(jì)要遵守哪些原則？ 2014-12-12
- 電子商城網(wǎng)站建設(shè)應(yīng)用平臺(tái)開發(fā)解決方案概述 2021-06-15
- 商城網(wǎng)站建設(shè)開發(fā)：創(chuàng)意、有特色的網(wǎng)頁設(shè)計(jì)該怎么做? 2021-01-07
- 成都網(wǎng)站建設(shè)公司：購物商城網(wǎng)站一般要考慮哪些因素？ 2016-11-02
- 電子商城網(wǎng)站建設(shè)需要注意哪些事項(xiàng)? 2020-12-01
- 商城網(wǎng)站建設(shè)有哪些需要注意的方面 2016-10-31
- 商城網(wǎng)站建設(shè)常見的幾種模塊分析 2023-02-23
- 商城網(wǎng)站建設(shè)要注重哪些細(xì)節(jié) 2016-10-12
- 成都網(wǎng)站建設(shè)公司淺析論商城網(wǎng)站的重要性 如何吸引客戶下單 2016-10-02
- 商城網(wǎng)站是如何開發(fā)的？ 2021-09-20
- 建設(shè)服裝商城網(wǎng)站的優(yōu)點(diǎn)有哪些？ 2021-03-26
- 常見的商城網(wǎng)站類型你了解嗎 商城網(wǎng)站設(shè)計(jì)要素 2021-04-17