jquery datatables - 从json获取列 [英] jquery datatables - get columns from json

问题描述

在jquery中，Datatables可以使用服务器端脚本来定义列？
我需要这样的东西

具有日期的列必须从服务器加载。
然后列数可以不同。

解决方案

展开Kamal Deep Singh所说的话：

您可以动态创建表，然后将数据表应用到其中以获取数据表的功能。

  //在html 
< table id =myDatatableclass =...无论你需要...>< / table> 
  

然后：

在$ javascript $中，您通常会初始化datatable 
 var newTable ='< thead>< tr>'; //开始构建新的表内容
 
 //然后使用.ajax（）调用数据
 $ .ajax（{
 url：http://my.data .source.com，
 data：{}，//数据，如果有的话，发送到服务器
 success：function（data）{
 //以下使用第一行抓取所有列名称并设置为< th> s 
 $ .each（data [0]，function（key，value）{
 newTable + =< th>+ key + < / th>; 
}）; 
 newTable + =< / tr>< / thead>< tbody>; 
 
 //然后加载数据进入表
 $ .each（data，function（key，row）{
 newTable + =< tr>; 
 $ .each（row，function（key， fieldValue）{
 newTable + =< td>+ fieldValue +< / td>; 
}）; 
 newTable + =< / tr>; 
}）; 
 newTable + ='< tbody>'; 
 
 $（'＃myDatatable ）的.html（newtable的）; //用我们刚刚创建的东西替换datatable的表占位符的内容。 
} 
}）; 
 
 //现在我们的表已创建，Datatables-ize it 
 $（'＃myDatatable'）。dataTable（）; 
  

请注意，您可以将那个.dataTable（）中的设置正常放置，但不是'sAjaxSource'或任何相关的数据获取功能 - 这是将数据表应用于已经存在的表，我们在飞行中创建了一个表。

好的，这是一个hacky这样做的方式，但它应该工作。

目前还没有内置的动态处理数据表的方法。请参阅： https://github.com/DataTables/DataTables/issues/273

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

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

解决方案

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

这篇关于jquery datatables - 从json获取列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！