DataTables - Ajaxデータソースの動的列

Question

私はAJAXデータソースから列名を読み取るためにDataTablesを取得しようとしていますが、ここで欠落していなければならないものがあるようです。

私はテーブルで使用されているデータと列を手動で定義することができます。fiddleを作成しました。

の表は、HTMLの中で宣言されていないと、列名を定義する必要（<thead>..</thead>）何もありません：

<table id="example" class="display table table-striped table-bordered" 
     cellspacing="0" width="100%"></table> 

JSでは、我々は、手動でデータを定義します。次に

var data = [ 
    [ "Row 1 - Field 1", "Row 1 - Field 2", "Row 1 - Field 3" ], 
    [ "Row 2 - Field 1", "Row 2 - Field 2", "Row 2 - Field 3" ], 
]; 

は、列名またはタイトルを手動で定義します。

var columns = [ 
    { "title":"One" }, 
    { "title":"Two" }, 
    { "title":"Three" } 
]; 

次に、テーブルを初期化するとき今、私の質問は、データが中に含まれている場合、私はこの作業を取得する方法をある

：

になり

$(document).ready(function() { 
    $('#example').DataTable({ 
    dom: "Bfrtip", 
    data: data, 
    columns: columns 
    }); 
}); 

：私たちは、単にのDataTableが使用する全体で以前に宣言された情報を渡しますAJAX server side response？

私はこれをさまざまな形で試してみましたが、実際には何も実際にはうまくいかないようですが、これに関する相対的なドキュメントを探すために争っています。例えば

端に列名含むJSONレスポンス返送サーバ側処理とします。これは、応答で与えられる

{ 
    "data": [ 
    { 
     "id": "1", 
     "One": "Row 1 - Field 1", 
     "Two": "Row 1 - Field 2", 
     "Three": "Row 1 - Field 3" 
    }, 
    { 
     "id": "2", 
     "One": "Row 2 - Field 1", 
     "Two": "Row 2 - Field 2", 
     "Three": "Row 2 - Field 3" 
    } 
    ], 
    "options": [], 
    "files": [], 
    "columns": [ 
    { 
     "title": "One", 
     "data": "One" 
    }, 
    { 

     "title": "Two", 
     "data": "Two" 
    }, 
    { 
     "title": "Three", 
     "data": "Three" 
    } 
    ] 
} 

、私はのためのAJAXのデータソースを使用するのDataTableを設定しようとしました行情報は次のとおりです。

$(document).ready(function() { 
    $('#example').DataTable({ 
    dom: "Bfrtip", 
    "ajax": '/test.php', 
    columns: columns 
    }); 
}); 

しかし、明らかにcolumnsは、ここに定義されていません。

だから私は手を前に、列のデータを取得：

​​3210

、上記のようにDataTableのにそれを渡します。しかし今回は、この例を実行したときに得られるのは、TypeError: p is undefinedというコンソールのエラーです。

それでは、サーバー側の応答内で返される動的に生成された列をどのように活用できますか？これを達成するための簡単な方法はありませんか？

EDIT：あなたはそれが与えられた簡単に十分なはずのDataTable ajaxで構築を使用しない場合は

<?php 
// DataTables PHP library 
require_once '/path/to/DataTables.php'; 

// Alias Editor classes so they are easy to use 
use 
    DataTables\Editor, 
    DataTables\Editor\Field, 
    DataTables\Editor\Format, 
    DataTables\Editor\Mjoin, 
    DataTables\Editor\Upload, 
    DataTables\Editor\Validate; 

// Build our Editor instance and process the data coming from _POST 
$out = Editor::inst($db, 'example') 
    ->fields(
    Field::inst('id')->set(false), 
    Field::inst('`One`')->validator('Validate::notEmpty'), 
    Field::inst('`Two`')->validator('Validate::notEmpty'), 
    Field::inst('`Three`')->validator('Validate::notEmpty') 
) 
    ->process($_POST) 
    ->data(); 

// On 'read' remove the DT_RowId property so we can see fully how the `idSrc` 
// option works on the client-side. 
if (Editor::action($_POST) === Editor::ACTION_READ) { 
    for ($i=0, $ien=count($out['data']) ; $i<$ien ; $i++) { 
     unset($out['data'][$i]['DT_RowId']); 
    } 
} 

// Create the thead data 
if (count ($out) > 0) { 
    $columns = array(); 
    foreach ($out['data'][0] as $column=>$relativeValue) { 
    // Add all but the id value 
    if ($column !== 'id') { 
     // Add this column name 
     $columns[] = array(
     "title"=>$column, 
     "data"=>$column 
    ); 
    } 
    } 
} 
// Add the the thead data to the ajax response 
$out['columns'] = $columns; 
// Send the data back to the client 
echo json_encode($out); 

Answer 1

：サーバー側の処理のための

のDataTableエディタコード/上記のJSONレスポンスを生成しますあなたのデータの構造：this JSFiddleよう

$(document).ready(function() { 
    $.ajax({ 
     type: 'POST', 
     dataType: 'json', 
     url: '/echo/json/', 
     data: { 
      json: JSON.stringify(jsonData) 
     }, 
     success: function(d) { 
      $('#example').DataTable({ 
       dom: "Bfrtip", 
       data: d.data, 
       columns: d.columns 
      }); 
     } 
    }); 
}); 

は、あなたはB一度にすべてのデータをロードし、その後限られていますそれは大きな問題ではないはずです...あなたが最初のajaxコールから列を取得し、DataTableが起動したら、組み込みのを追加しない限り - 私はこれを試していませんでした...