jquery datatables - 从 json 获取列

发布于 2024-12-23 10:01:48 字数 148 浏览 0 评论 0原文

在 jquery Datatables 中是否可以使用服务器端脚本定义列? 我需要这样的东西 在此处输入图像描述

必须从服务器加载包含日期的列。 然后列数可以变化。

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

The columns with dates have to be loaded from server.
Then number of columns can vary.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

断念 2024-12-30 10:01:48

我想我已经找到了您正在寻找的内容

,我将粘贴一些代码并发布一个指向类似 Q' 的链接,您将在其中获得更多信息...

$.ajax( {
    "url": 'whatever.php',
    "success": function ( json ) {
        json.bDestroy = true;
        $('#example').dataTable( json );
     },
    "dataType": "json"
} );

其中 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" }
 ]

}

,这里是原始线程的链接

通过 JSON 数组(ajax)定义列

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

$.ajax( {
    "url": 'whatever.php',
    "success": function ( json ) {
        json.bDestroy = true;
        $('#example').dataTable( json );
     },
    "dataType": "json"
} );

where json is something like this

{

"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)

冷︶言冷语的世界 2024-12-30 10:01:48

扩展 Kamal Deep Singh 的说法:

您可以动态创建表,然后将数据表应用于它以获得数据表的功能。

// up in the html
<table id="myDatatable" class="... whatever you need..."></table>

然后:

// 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(); 

请注意,您可以像平常一样将设置放入 .dataTable() 中,但是不能将设置放在“sAjaxSource”或任何关联的数据获取函数中——这是将数据表应用于已经存在的表,这是我们动态创建的表。

好吧,这是一种很奇怪的方法,但它应该有效。

目前还没有内置的方法可以动态地对数据表执行此操作。请参阅此处:https://github.com/DataTables/DataTables/issues/273

To expand on what Kamal Deep Singh was saying:

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.

Ok, so it's kind of a hacky way of doing it, but it should work.

There isn't currently a built in method of doing this with datatables dynamically. See here: https://github.com/DataTables/DataTables/issues/273

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文