如何将自定义列添加到数据表？

如何解决如何将自定义列添加到数据表？

我正在使用

gem 'jquery-datatables-rails','3.4.0'
gem 'ajax-datatables-rails'

我的数据表看起来像

此表的我的CoffeeScript看起来像

# Datatables
$ ->
  table = $('#qr-submissions-table').dataTable
    dom: 'C<"clear">lfrtip'
    processing: true
    serverSide: true
    ajax: $('#qr-submissions-table').data('source')    
    pagingType: 'full_numbers'
    columns: [
      {data: 'custom_columns'}
      {data: 'delivery_number' }
      {data: 'qpi_department' }     
      {data: 'qr_client' }
      {data: 'date_submitted'}
      {data: 'bay_number' }
      {data: 'submitted_by'}
      {data: 'delivery_note'}
      {data: 'ops' }
    ]
    "order": [[ 3,"desc" ]]
    columnDefs: [
      { "orderable": false,"targets": [3,7,8]},{"targets": 1,visible: ($("#delivery_number_show").val() == 'true')},{"targets": 2,visible: ($("#division_show").val() == 'true')},{"targets": 3,visible: ($("#client_show").val() == 'true')},{"targets": 4,visible: ($("#scan_time_show").val() == 'true')},{"targets": 5,visible: ($("#delivery_location_show").val() == 'true')}
      {"targets": 6,visible: ($("#submitted_by_show").val() == 'true')},{"targets": 7,visible: ($("#delivery_note_show").val() == 'true')},{"targets": 8,visible: ($("#photo_show").val() == 'true')},]

在此，自定义列字段是像'{ "name1" : "value1","name2" : "value2" }'之类的哈希。。如何将其显示为库伦名称和值。 name1和name2将是列标题，而value1和value2将是对应的行值。每一行的'value1'和'value2'具有不同的值。有什么办法吗？请帮忙吗？

解决方法

不幸的是，我不了解Ruby-on-rails，但我确实知道jQuery DataTables。

如果您的JSON响应如下所示：

[{ "Id": "1","Name": [{ "FirstName": "Tiger","LastName": "Nixon"}],"Position": "System Architect","Office": "Edinburgh","Age": 61 },{ "Id": "2","Name": [{ "FirstName": "Garrett","LastName": "Winters"}],"Position": "Accountant","Office": "Tokyo","Age": 63 },{ "Id": "3","Name": [{ "FirstName": "Ashton","LastName": "Cox"}],"Position": "Jr. Technical Author","Office": "San Francisco","Age": 66 }];

并且您的列名将是固定的（在您的示例中为“ name1”和“ name2”），您可以执行类似的操作（我将为您提供两种实现方法在同一示例中）：

var jsonData = [ 
    { "Id": "1","Age": 66 }];

var table = $('#example').DataTable({
  LengthChange: false,data: jsonData,columns: [
      { data: 'Id'},{ data: 'Name[0].FirstName' },// 1st Way
      { 
         data: null,title: "LastName",render: function(data,type,full,meta) { // 2nd Way
            return data.Name[0].LastName;
         }
      },{ data: 'Position' },{ data: 'Office' },{ data: 'Age' }
    ]
});

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<table id="example" class="table display" style="width:100%">
  <thead>
  <tr>
      <th>Id</th>
      <th>FirstName</th>
      <th>LastName</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
    </tr>
  </thead>
</table>

注意：在这种情况下，我尝试使用键名称

来模拟您的自定义列字段

但是，如果您的列将是动态的（名称可能会更改），则需要执行以下操作： Example

快乐编码！