jquery 数据表 - 从 json 中获取列
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8665309/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery datatables - get columns from json
提问by mik
In jquery Datatables is it possible to define columns with a server-side script?
I need something like this
在 jquery 数据表中是否可以使用服务器端脚本定义列?我需要这样的东西
The columns with dates have to be loaded from server. Then number of columns can vary.
必须从服务器加载带有日期的列。那么列数可能会有所不同。
回答by Patches
To expand on what Kamal Deep Singh was saying:
扩展 Kamal Deep Singh 所说的内容:
You could dynamically create the table on the fly, then apply datatables to it to get datatables' functionality.
您可以动态地动态创建表,然后将数据表应用于它以获得数据表的功能。
// up in the html
<table id="myDatatable" class="... whatever you need..."></table>
and then:
进而:
// in the javascript, where you would ordinarily initialize the datatable
var newTable = '<thead><tr>'; // start building a new table contents
// then call the data using .ajax()
$.ajax( {
url: "http://my.data.source.com",
data: {}, // data, if any, to send to server
success: function(data) {
// below use the first row to grab all the column names and set them in <th>s
$.each(data[0], function(key, value) {
newTable += "<th>" + key + "</th>";
});
newTable += "</tr></thead><tbody>";
// then load the data into the table
$.each(data, function(key, row) {
newTable += "<tr>";
$.each(row, function(key, fieldValue) {
newTable += "<td>" + fieldValue + "</td>";
});
newTable += "</tr>";
});
newTable += '<tbody>';
$('#myDatatable').html(newTable); // replace the guts of the datatable's table placeholder with the stuff we just created.
}
});
// Now that our table has been created, Datatables-ize it
$('#myDatatable').dataTable();
Note you can put settings in that .dataTable() as normal, however, not 'sAjaxSource' or any of the associated data-getting functions -- this is applying datatables to an already existing table, one we created on the fly.
请注意,您可以像往常一样将设置放入 .dataTable() 中,但是,不是 'sAjaxSource' 或任何相关的数据获取函数——这是将数据表应用到我们即时创建的现有表。
Ok, so it's kind of a hacky way of doing it, but it should work.
好的,所以这是一种hacky的方式,但它应该有效。
There isn't currently a built in method of doing this with datatables dynamically. See here: https://github.com/DataTables/DataTables/issues/273
目前没有内置的方法可以动态地使用数据表执行此操作。请参见此处:https: //github.com/DataTables/DataTables/issues/273
回答by Daniel
I think I have found what you were looking for
我想我找到了你要找的东西
I will paste some code + post a link to a similar Q' in which you will get much more info...
我将粘贴一些代码并发布一个指向类似 Q' 的链接,您将在其中获得更多信息...
$.ajax( {
"url": 'whatever.php',
"success": function ( json ) {
json.bDestroy = true;
$('#example').dataTable( json );
},
"dataType": "json"
} );
where json is something like this
其中 json 是这样的
{
"aaData": [
[ "2010-07-27 10:43:08", "..."], [ "2010-06-28 17:54:33", "..."],
[ "2010-06-28 16:09:06", "..."], [ "2010-06-09 19:15:00", "..."]
] ,
"aaSorting": [
[ 1, "desc" ]
],
"aoColumns": [
{ "sTitle": "Title1" },
{ "sTitle": "Title2" }
]
}
here a link to the original thread
这里是原始线程的链接