Datatables - 动态列

Question

Datatables - 动态列

3

我明白这个问题之前已经被问过了，但我的变化与其他答案不匹配。

我有一个以这种形式呈现的JSON数据源：

    {
      "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"}
      ]
  }

我是这样加载数据的：

$("#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
});

以上内容完美无误。我需要的是动态加载列，就像这样：

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

我只得到了一个 aDataSource 错误。如果我在代码中的其他任何地方运行 .getJSON 语句，我会得到期望的响应，也就是我需要的那个。有什么想法吗？

我希望这个能够正常工作，最好不用改变它，因为我的数据源会根据我应用的过滤器而改变，这些过滤器会影响 json 源、数据集等。

更新：

表格初始化的方式：

<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",
.......

- Ioannis Kokkinis

2个回答

2

你可以编写自定义js函数，在从服务器获取响应后将标题放置在正确的位置。请查看以下代码：

来自服务器的JSON响应：

{
    "columns": [
        [ "Name" ],
        [ "Position" ],
        [ "Office" ],
        [ "Extn." ],
        [ "Start date" ],
        [ "Salary" ]
    ],
    "data": [
    [
      "Tiger Nixon",
      "System Architect",
      "Edinburgh",
      "5421",
      "2011/04/25",
      "$320,800"
    ],....
}

使用JS方法将其处理以将标题放在适当的位置：

$( document ).ready( function( $ ) {
        $.ajax({
                "url": 'arrays_short.txt',
                "success": function(json) {
                    var tableHeaders;
                    $.each(json.columns, function(i, val){
                        tableHeaders += "<th>" + val + "</th>";
                    });

                    $("#tableDiv").empty();
                    $("#tableDiv").append('<table id="displayTable" class="display" cellspacing="0" width="100%"><thead><tr>' + tableHeaders + '</tr></thead></table>');
                    //$("#tableDiv").find("table thead tr").append(tableHeaders);  

                    $('#displayTable').dataTable(json);
                },
                "dataType": "json"
            });
    });

请查看链接以获取更多信息。希望这有所帮助！

- Language Lassi

当我需要更新datatable的源时，我运行以下代码： var table = $('#datatable-buttons').DataTable(); var ajaxurl = table.ajax.url();这样，我只需更新ajaxurl变量即可。在您上面的方法中，我需要调用什么来更新列和数据？ - Ioannis Kokkinis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kapantzak · Accepted Answer

首先获取列，然后进行datatables初始化：

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

编辑

如果我理解正确，您想要做到这一点：

$("#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()时，执行过程是异步的，所以列将变成未定义。

这就是为什么你必须在getJSON回调函数中调用DataTable初始化器。

另一种方法可能是在一个非异步函数中获取列并设置async: false(查看这个问题)。