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

Posted

技术标签:

【中文标题】如何将自定义列添加到数据表?【英文标题】:How to add custom columns to datatable? 【发布时间】:2021-01-02 21:09:49 【问题描述】:

我正在使用

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”都有不同的值。有没有办法做到这一点?请帮忙?

【问题讨论】:

欢迎来到***。请不要使用纯文本的屏幕截图,例如代码和日志消息。它们难以阅读,无法被搜索引擎索引。最重要的是,人们无法将您的代码复制到他们的答案中。 【参考方案1】:

不幸的是,我不知道 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”),您可以执行以下操作(我将为您提供 2 种实现方式在同一个例子中):

var jsonData = [ 
     "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 ];

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>

注意:在这种情况下,我正在尝试使用键 Name

模拟您的自定义列字段

但是,如果您的列是动态的(名称可能会更改),您需要执行以下操作: Example

【讨论】:

以上是关于如何将自定义列添加到数据表?的主要内容,如果未能解决你的问题,请参考以下文章

使用 udf 传递列作为参数将自定义列添加到 pyspark 数据帧

使用 Debezium 的 Quarkus 发件箱模式:如何将自定义列添加到发件箱表

Netsuite 将自定义字段添加到交易列字段

php 将自定义列添加到管理表

php 将自定义列添加到“事件日历后端列表”

将自定义列产品可见性添加到 Woocommerce 3 中的管理产品列表