How to add custom columns to datatable?

Question

I am using

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

My data table look like

My CoffeeScript for this table looks like

# 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')}, 
   
    ]

Here the custom column field is hash like '{ "name1" : "value1", "name2" : "value2" }' .. How can i display this as coulm names and values. name1 and name2 will be column headers and value1 and value2 will be corresponding row values.each row has different values for 'value1' and 'value2'. Is there any way to do this? Please help?

Welcome to stackoverflow. Please do not use screenshots of plain-text such as code and log messages. They are hard to read and cannot be indexed by search engines. And most importantly people can't copy your code into their answers. — max, Sep 16 '20 at 07:36

score 0 · Answer 1 · edited Nov 06 '21 at 10:02

Unfortunately I don't know Ruby-on-rails, but I DO know jQuery DataTables.

If your JSON response looks like this:

[{ "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 }];

AND the name of your columns will be fixed (in your example: "name1" and "name2"), you can do something like this (I'll provide you 2 ways of achieving it in the same example):

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>

Note: In this case I'm trying to emulate your custom column field with the key Name

But, if your columns will be dynamic (names could change), you'll need to do something like this: Example

How to add custom columns to datatable?

1 Answers1