如何在绑定jQuery DataTable之前保留数据副本？

Question

我正在使用jQuery DataTables，我有一个ajax数据源。但是，我想做的是：

1. 初始化数据表（空），但上面有'loading'横幅。我可以很好地初始化数据表，但无论processing: true如何，它都不会继续显示加载横幅，因为它已经完成了对空数据集的处理。
2. 开始我自己的独立ajax（$ .getJSON）数据请求，将json响应存储在javascript变量中，这可能是一个短暂的延迟。
3. 一旦ajax请求返回，然后将数据填充到数据表中并清除'loading'标题（我不清楚如何'设置'DataTable后初始化的数据源）
4. 使用数据也可以创建图形（可能是D3.js），这将与＃2中ajax调用的javascript对象一起使用。

我找不到将数据表初始化为“加载”状态的方法，或者在加载数据后填充它。我想避免两个单独的ajax请求（一次用于数据表，另一个用于图表）。

这可能吗？

//Pseudo-code
var myData = [];

var dt = $("#table").dataTables({
  processing = true //?? Loading does not remain while ajax request below executes
});

$.getJSON("/api/data", function (data) {
    myData = data;
    dt.bind(myData); //?? Don't know how to do this
    dt.processing = false; //?? Turn off loading message
  }
});

Answer 1

＆＃34;正在加载＆＃34; state是默认的。只需删除processing : true即可。我觉得你在这里试图用大锤来破解坚果。要重用JSON并防止多个AJAX请求，只需使用dataSrc回调：

function d3Graph(json) {
   //initialise the d3 graph here
}
$('#example').DataTable( {
   ajax: {
      url: "/api/data",
      dataSrc: function(json) {
          d3Graph(json);
          return json;
      }     
   },
   ...
})

参见此处的示例 - ＆gt;的 http://jsfiddle.net/7z6aamna/

通常，有三种方法可以在初始化后使用新数据填充dataTable：

1. 使用新选项（即新的data变量）
销毁并重新初始化
2. 使用table.ajax.reload()
3. 清空表并以编程方式逐个插入新行

但你不需要那样的东西。您关心的只是重用AJAX数据。

这是您想要完成的内容的骨架。基本上它是上述方法中的第一个。只需为dataTables null分配一个data值，然后加载JSON，然后重新初始化dataTable（以及d3图形或其他）。主要＆＃34;技巧＆＃34;这里是设置语言选项emptyTable以显示＆＃34; 加载数据.. ＆＃34;而不是＆＃34; 表＆＃34;中没有数据可用。我把它包装成一个小的javascript文字，只是为了制作一些代码：

var Data = {
    data : null,
    init : function() {
       this.initTable();
       this.loadData();
    },
    loadData : function() {
       $.getJSON('https://api.myjson.com/bins/1miqx', function(json) {
           Data.data = json;
           Data.initTable();
           Data.initGraph();
       })
    },
    initTable : function() {
       $("#example").DataTable({
          destroy : true, //important
          data : Data.data,
          language : {    //important
             emptyTable: 'Loading data ...'
          },
          columns: [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
          ]
       })
    },
    initGraph : function() {
       console.log('initialising d3 graph')
    }
}

Data.init();

<强> http://jsfiddle.net/ncLn6Lh6/