数据表-动态列 [英] Datatables - dynamic columns

问题描述

我知道以前曾问过这个问题，但是我的版本与其他答案不符.

I understand that this question has been asked before, but my variation does not match the other answers.

我有这种形式的json数据源:

I have a json data source in this form :

    {
      "columns":[
          {"title":"Store Number","data":"StoreNbr"},
          {"title":"Store Name","data":"StoreName"},
          {"title":"2016-01-01","data":"2016-01-01"},
          {"title":"2016-01-02","data":"2016-01-02"}
      ],
      "data":[
          {"2016-01-01":"51","StoreNbr":"1","StoreName":"Store 1","2016-01-02":"52"}
      ]
  }

我正在像这样加载数据:

I am loading the data like this :

$("#datatable").DataTable({
            "ajax": {
            "url": "http://myjsonurl-that-produces-above-response",
           "dataSrc": "data"
        },

    "columns": [
       {"title":"Store Number","data":"StoreNbr"},
       {"title":"Store Name","data":"StoreName"},
       {"title":"2016-01-01","data":"2016-01-01"},
       {"title":"2016-01-02","data":"2016-01-02"},
     ],   
     dom: "Bfrtip",
    "bProcessing": true,
    "bServerSide" : true
});

上面的方法完美无缺.我需要的是像这样动态加载列:

The above works flawlessly. What I need, is to load the columns dynamically, like this :

"columns": $.getJSON($('#datatable').DataTable().ajax.url(), 
           function(json){
              return (JSON.stringify(json.columns));  
           });

我得到的只是一个aDataSource错误.如果我在代码中的其他任何地方运行.getJSON东西，都会得到预期的响应，这是我需要的响应.有什么想法吗?

All I get is a aDataSource error. If I run the .getJSON thing anywhere else in the code I get the expected response, the one I need. Any ideas?

我希望使它能够正常工作，因为我的数据源会根据我应用的影响json源，数据集等的过滤器而不断变化.

I would like to make this to work as it is preferably as my datasource keeps changing based on filters I apply that affect the json source, dataset etc.

更新:

表的初始化方式:

<script type="text/javascript"> 
          TableManageButtons.init();

TableManageButtons = function () {"use strict"; return { init: function () { handleDataTableButtons()  } }}();

var handleDataTableButtons = function () {
    "use strict";
    0 !== $("#datatable-buttons").length && $("#datatable-buttons").DataTable({
            "ajax": {
            "url": "http://myjsonurl.php",
.......

推荐答案

尝试首先获取列，然后继续进行数据表初始化:

Try to get the columns first and then proceed with datatables initialization:

$.getJSON('url/for/colums', function(columnsData) {
   $("#datatable").DataTable({
      ...
      "columns": columnsData
   });
});

编辑

如果我理解正确，您想这样做:

If I understand correctly, you want to do this:

$("#datatable").DataTable({
       "ajax": {
       "url": "http://myjsonurl-that-produces-above-response",
       "dataSrc": "data"
    },
    "columns": getColumns(), //Execute $.getJSON --> asynchronous (the code continous executing without the columns result)
    dom: "Bfrtip",
    "bProcessing": true,
    "bServerSide" : true
});

通过这种方式，当您调用 getColumns()时，执行是异步的，因此列将是未定义的.

In this way, when you call getColumns() the execution is asynchronous, so the columns are going to be undefined.

这就是为什么您必须在getJSON回调函数中调用DataTable初始化程序的原因.

That's why you have to call the DataTable initializer in the getJSON callback function.

另一种方法可能是在非异步函数设置中获取列 async:false (请检查

Another way might be to get the columns in a not asynchronous function setting async: false (Check this question)

这篇关于数据表-动态列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！