微信扫一扫打赏支持

vue+datatable+vue-resource动态获取jsonp数据

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>

 

 

 
posted @ 2019-11-27 22:23  范仁义  阅读(1813)  评论(0)  编辑  收藏  举报