【发布时间】：2016-07-02 22:48:37
【问题描述】：
我正在尝试让 DataTables 从 AJAX 数据源读取列名，但似乎这里一定有一些我必须遗漏的东西。
我做了一个小提琴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" }
];
然后，当我们初始化表时，我们只需传递先前声明的信息以供 DataTables 使用：
$(document).ready(function() {
$('#example').DataTable( {
dom: "Bfrtip",
data: data,
columns: columns
});
});
结果：
现在我的问题是，如果数据包含在 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"
}
]
}
鉴于这是响应，我尝试将 DataTables 配置为对行信息使用 AJAX 数据源，如下所示：
$(document).ready(function() {
$('#example').DataTable( {
dom: "Bfrtip",
"ajax": '/test.php',
columns: columns
});
});
但显然columns 在这里是未定义的。
所以我事先得到了列数据：
function getPromise() {
var deferred = $.Deferred();
var dataUrl = document.location.origin+'/text.php';
$.getJSON(dataUrl, function(jsondata) {
setTimeout(function() {
deferred.resolve(jsondata);
}, 0);
}).fail(function( jqxhr, textStatus, error ) {
// ********* FAILED
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err );
});
return deferred.promise();
}
// Get the columns
getPromise().done(function(jsondata) {
columns = jsondata.columns;
console.log(columns);
});
并将其传递给上面的 DataTables。但是这一次我在运行示例时得到的只是控制台中的一个错误，上面写着TypeError: p is undefined。
那么我该如何利用在服务器端响应中返回的动态生成的列呢？有没有更简单的方法来实现这一点？
编辑：
用于服务器端处理/生成上述 JSON 响应的 DataTables Editor 代码：
<?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 );
【问题讨论】：
-
text.php的回复是什么？ -
@CMedina 你好！响应是问题中包含的唯一 JSON。所以这只是正常的服务器端响应，但最后我将列名包含在“列”中。所以这就是我作为承诺返回并在
columns: columns中传递给DT 的内容。 -
这是一个有趣的问题，在我编写 JSFiddle 时请耐心等待。
-
检查你的 php 代码，我用你的 json 测试你的函数 js 就可以了！
标签： php jquery datatables