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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 10:51:48  来源:igfitidea点击:

jquery datatables - get columns from json

jqueryjsondatatables

提问by mik

In jquery Datatables is it possible to define columns with a server-side script? I need something like this enter image description here

在 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

这里是原始线程的链接

Column definition via JSON array (ajax)

通过 JSON 数组 (ajax) 定义列