zoukankan      html  css  js  c++  java
  • dataTable重新异步加载表格数据

    如果表格的数据不是固定的,譬如需要根据时间等参数变化,那么不可避免的需要异步加载数据。 
    需要注意的是,dataTable表格对象不允许两次初始化,所以你不能简单粗暴的再次执行表格的构建方法,官方文档提供了相关的表格数据重新加载的方法,这里记载一下。 

    之前说过,dataTable数据来源可以直接对data属性赋值,或者使用ajax属性发起请求。我原本以为官方会提重置data的方法,不过在官网文档上面没有找到,到是后者,官方提供了重新加载数据的方法:table.ajax.reload(),这就意味着,如果想使用重新加载数据的功能,你的数据来源只能是ajax。 

    我尽量把项目里地代码拆开,使demo更加简单明了。 
    这里需要注意两点:一是如何获取表格对象,二是如何重写ajax函数。 

    获取已经初始化的表格对象并重新加载数据 

    Javascript代码  收藏代码
    1. var table = $('#example').DataTable();  
    2. table.ajax.reload();  



    在写ajax函数时,需要调用callback方法,参数就是你需要填充进表格的数据。需要注意的是这是一个对象 

    Javascript代码  收藏代码
      1. "ajax" : function(data, callback, settings) {  
      2.     // 获取发起ajax的参数  
      3.     var param = {};  
      4.     param.service_code = $("#serviceSelection").val();  
      5.     param.start = $("#startTime").val();  
      6.     param.end = $("#endTime").val();  
      7.     if ($("#callerSelection").val() != 'all')  
      8.         param.caller = $("#callerSelection").val();  
      9.     // 发起ajax请求,获取数据  
      10.     var ajaxData = getAjax(param, "/api/hm/service/record",  
      11.             false);  
      12.     var data = ajaxData.data;  
      13.     // 解析数据  
      14.     if (ajaxData.status == 100) {  
      15.         var tableData = new Array(data.records.length);  
      16.         for (i = 0; i < data.records.length; i++) {  
      17.             arrary = new Array(9);  
      18.             arrary[0] = data.records[i].id;  
      19.             arrary[1] = "<span>"+data.records[i].request+</span>";  
      20.             arrary[2] = data.records[i].caller;  
      21.             arrary[3] = data.records[i].status_text;  
      22.             arrary[4] = data.records[i].reason;  
      23.             arrary[5] = data.records[i].use_cache;  
      24.             arrary[6] = data.records[i].create_time;  
      25.             arrary[7] = data.records[i].invoke_time;  
      26.             arrary[8] = "<button onclick='showModal("  
      27.                     + data.records[i].id + ")'>查看日志</button>";  
      28.             tableData[i] = arrary;  
      29.         }  
      30.         // 填充数据,填充表格的数据是一个对象,对象需要一个叫data的属性,这个属性对应的值,才是表格真正的数据  
      31.   
      32.         var requireData = {};  
      33.         requireData.data = tableData;  
      34.         callback(requireData);  
      35.     } else {  
      36.         var requireData = {};  
      37.         requireData.data = [];  
      38.         callback(requireData);  
      39.     }  
      40. }  
  • 相关阅读:
    Exchange调整入站SMTP连接超时时间
    使用WSS和SOFS管理集群存储--Storage
    String构造方法和字符集编码转换
    系统类和数学操作类
    JavaSE——数据类型流、内存流、打印流
    JavaSE——装饰设计模式+简单加密解密工程
    JavaSE——装饰设计模式
    JavaSE——装饰流
    JavaSE —— IO
    JavaSE —— IO简介
  • 原文地址:https://www.cnblogs.com/tl1025/p/9604107.html
Copyright © 2011-2022 走看看