vue+datatable+vue-resource動態獲取jsonp數據
一、總結
一句話總結：
1、模板表：弄一個模板表，模板表用於一直動態獲取vue更新的數據
2、真實顯示數據的表是模板表的copy（id動態變化），用datatable初始化這個table即可顯示數據
3、刪表加表：vue-resource動態獲取jsonp數據，刪除舊的顯示數據的表（注意清datatable），根據模板表用datatable初始化新表即可
1、動態刷新datatable的思路是什么？
1、模板表：弄一個模板表，模板表用於一直動態獲取vue更新的數據
2、真實顯示數據的表是模板表的copy（id動態變化），用datatable初始化這個table即可顯示數據
3、刪表加表：vue-resource動態獲取jsonp數據，刪除舊的顯示數據的表（注意清datatable），根據模板表用datatable初始化新表即可
2、datatable的各個方法的api網址（https://datatables.net/reference/api/）啟示？
官網是一定可以找到非常詳細的api文檔的，就是需要多點點
怎么使用官方的英文文檔說的很詳細，要仔細看（也要注意多配合百度）
3、如何在vue的生命周期函數updated里面監控某一個vue變量的變化而執行某些操作（比如數據更新就刪表加表，否則不操作）？
新增一個監控這個變量a變化的變量b，在updated里面根據變量b的值進行操作
updated:function(){ if(this.is_lists_change){ //console.log('lists數據更新了！'); this.is_lists_change=false; //1、刪除原來的實際顯示數據的表格部分 let id_str='num_datatable_box_'+this.query_times; if($('#'+id_str).hasClass('dataTable')){ let old_datatable = $('#'+id_str).dataTable(); // old_datatable.destroy(); old_datatable.fnDestroy(); //還原初始化了的datatable $('#'+id_str).empty(); // empty in case the columns change } let id_str_wrapper=id_str+'_wrapper'; $('#num_datatable_box_real').html(''); //2、添加新的顯示數據的表格部分 this.query_times++; let new_id_str='num_datatable_box_'+this.query_times; let model_table=$('#num_datatable_box_model').html(); //替換id let table=model_table.replace(/num_datatable_box_model_table/g,new_id_str); $('#num_datatable_box_real').append(table); //table的jquery對象 let table_jquery=$('#'+new_id_str); table_jquery.show(); table_jquery.dataTable(); } },
4、vue和jquery配合使用啟示？
怎么方便怎么來，怎么能實現最好的效果怎么來
updated:function(){ if(this.is_lists_change){ //console.log('lists數據更新了！'); this.is_lists_change=false; //1、刪除原來的實際顯示數據的表格部分 let id_str='num_datatable_box_'+this.query_times; if($('#'+id_str).hasClass('dataTable')){ let old_datatable = $('#'+id_str).dataTable(); // old_datatable.destroy(); old_datatable.fnDestroy(); //還原初始化了的datatable $('#'+id_str).empty(); // empty in case the columns change } let id_str_wrapper=id_str+'_wrapper'; $('#num_datatable_box_real').html(''); //2、添加新的顯示數據的表格部分 this.query_times++; let new_id_str='num_datatable_box_'+this.query_times; let model_table=$('#num_datatable_box_model').html(); //替換id let table=model_table.replace(/num_datatable_box_model_table/g,new_id_str); $('#num_datatable_box_real').append(table); //table的jquery對象 let table_jquery=$('#'+new_id_str); table_jquery.show(); table_jquery.dataTable(); } },
5、datatable的destory操作的效果和實現（刪除table的時候要進行這個操作，避免內存泄漏）？
效果：去除表上面的'dataTable'的class：Restore the tables in the current context to its original state in the DOM by removing all of DataTables enhancements
實現：是fnDestroy()方法而不是destroy()方法，可能和datatable的版本有關
destroy：Restore the tables in the current context to its original state in the DOM by removing all of DataTables enhancements, alterations to the DOM structure of the table and event listeners.
let id_str='num_datatable_box_'+this.query_times; if($('#'+id_str).hasClass('dataTable')){ let old_datatable = $('#'+id_str).dataTable(); // old_datatable.destroy(); old_datatable.fnDestroy(); //還原初始化了的datatable $('#'+id_str).empty(); // empty in case the columns change }
6、vue的mounted函數會在vue數據更新的時候執行么？
不會，只在頁面加載的時候執行一次
7、vue導致的閃爍問題如何快速高效解決？
開始隱藏，在mounted函數中設置為顯示就好
8、vue-resource獲取jsonp數據實例？
this.$http.jsonp(url).then(function (result) {
this.$http.jsonp(url).then(function (result) { layer.open({ content: '獲取數據成功！' ,skin: 'msg' ,time: 2 //2秒后自動關閉 }); // 通過 result.body 拿到服務器返回的成功的數據 this.is_get_num=false; this.lists=result.body.data.data; this.is_lists_change=true; //console.log(result.body.data.data) },response => { // error callback this.is_get_num=false; layer.open({ content: '獲取數據失敗！' ,skin: 'msg' ,time: 2 //2秒后自動關閉 }); })
9、datatable的最基本使用？
直接初始化，不必進行其它操作，也不用關心分頁樣式：$('#'+id_str).dataTable();
二、vue+datatable+vue-resource動態獲取jsonp數據
1、效果圖
2、代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>查找QQ號碼</title> 8 9 <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/> 10 <link rel="stylesheet" type="text/css" href="fry_components/font-awesome/css/font-awesome.min.css"/> 11 <script type="text/javascript" src='js/jquery.min.js'></script> 12 <script type="text/javascript" src='js/bootstrap.min.js'></script> 13 <script type="text/javascript" src='js/vue.min.js'></script> 14 <script type="text/javascript" src='js/vue-resource.min.js'></script> 15 <script type="text/javascript" src='fry_components/layer_mobile_2.0/layer.js'></script> 16 <!-- DataTables --> 17 <link rel="stylesheet" href="fry_components/datatables.net-bs/css/dataTables.bootstrap.min.css"> 18 <script src="fry_components/datatables.net/js/jquery.dataTables.min.js"></script> 19 <script src="fry_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script> 20 </head> 21 <body> 22 <div id="my_main_part" > 23 <div class="panel panel-info" style="margin:20px;"> 24 <!-- 頭部 --> 25 <div class="panel-heading"> 26 <h1 style="display: inline-block;">查找QQ號碼</h1> 27 <span>號碼總數 28 <span class="label label-warning" >{{lists.length}}</span> 29 </span> 30 </div> 31 <!-- 內容 --> 32 <div class="panel-body"> 33 <!--查詢按鈕--> 34 <div id="search_num_input_part" class="input-group" style="display: none;"> 35 <input class="form-control" v-model="year" placeholder="請輸入要查詢的num" type="text"/> 36 <span class="input-group-btn"> 37 <button v-if="!is_get_num" class="btn btn-primary" @click="getNum()">查詢</button> 38 <button v-else class="btn btn-primary" ><i class="fa fa-fw fa-spinner fa-spin"></i></button> 39 </span> 40 </div> 41 42 <!--數據顯示區域--> 43 <div id="fry_qq_data_part" style="margin-top: 30px;border: 1px dashed #eee;padding: 5px;"> 44 <!--模板表--> 45 <div id="num_datatable_box_model"> 46 <table id="num_datatable_box_model_table" class="table table-striped" style="display: none;"> 47 <thead> 48 <tr> 49 <th>編號</th> 50 <th>qq號</th> 51 </tr> 52 </thead> 53 <tbody> 54 <tr v-for="(list,index) in lists"> 55 <td>{{index+1}}</td> 56 <td>{{list.num}}</td> 57 </tr> 58 </tbody> 59 </table> 60 </div> 61 <div id="num_datatable_box_real"> 62 <table :id="'num_datatable_box_'+query_times" class="table table-striped" style=""> 63 <thead> 64 <tr> 65 <th>編號</th> 66 <th>qq號</th> 67 </tr> 68 </thead> 69 <tbody> 70 <tr v-for="(list,index) in lists"> 71 <td>{{index+1}}</td> 72 <td>{{list.num}}</td> 73 </tr> 74 </tbody> 75 </table> 76 </div> 77 78 </div> 79 </div> 80 81 </div> 82 83 </div> 84 85 <script> 86 new Vue({ 87 el:'#my_main_part', 88 89 updated:function(){ 90 if(this.is_lists_change){ 91 //console.log('lists數據更新了！'); 92 this.is_lists_change=false; 93 94 //1、刪除原來的實際顯示數據的表格部分 95 let id_str='num_datatable_box_'+this.query_times; 96 if($('#'+id_str).hasClass('dataTable')){ 97 let old_datatable = $('#'+id_str).dataTable(); 98 // old_datatable.destroy(); 99 old_datatable.fnDestroy(); //還原初始化了的datatable 100 $('#'+id_str).empty(); // empty in case the columns change 101 } 102 let id_str_wrapper=id_str+'_wrapper'; 103 $('#num_datatable_box_real').html(''); 104 105 106 //2、添加新的顯示數據的表格部分 107 this.query_times++; 108 let new_id_str='num_datatable_box_'+this.query_times; 109 let model_table=$('#num_datatable_box_model').html(); 110 //替換id 111 let table=model_table.replace(/num_datatable_box_model_table/g,new_id_str); 112 $('#num_datatable_box_real').append(table); 113 //table的jquery對象 114 let table_jquery=$('#'+new_id_str); 115 table_jquery.show(); 116 table_jquery.dataTable(); 117 118 } 119 }, 120 mounted:function(){ 121 let id_str='num_datatable_box_'+this.query_times; 122 let datatable=$('#'+id_str).dataTable(); 123 124 //加載完成再顯示閃爍區域 125 $('#search_num_input_part').show(); 126 //datatable.fnDestroy(); 127 128 }, 129 data:{ 130 year:'', 131 is_get_num:false, 132 query_times:1, 133 is_lists_change:false, 134 lists:[ 135 136 ], 137 }, 138 methods:{ //方法 139 getNum:function () { 140 let url='---------------------------------------------------'; 141 let num_str='num='+this.year; 142 //console.log(num_str); 143 url=url.replace('num=2008',num_str); 144 //console.log(url); 145 this.is_get_num=true; 146 this.$http.jsonp(url).then(function (result) { 147 layer.open({ 148 content: '獲取數據成功！' 149 ,skin: 'msg' 150 ,time: 2 //2秒后自動關閉 151 }); 152 // 通過 result.body 拿到服務器返回的成功的數據 153 this.is_get_num=false; 154 this.lists=result.body.data.data; 155 this.is_lists_change=true; 156 //console.log(result.body.data.data) 157 158 },response => { 159 // error callback 160 this.is_get_num=false; 161 layer.open({ 162 content: '獲取數據失敗！' 163 ,skin: 'msg' 164 ,time: 2 //2秒后自動關閉 165 }); 166 }) 167 } 168 }, 169 }) 170 </script> 171 </body> 172 </html>