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?

Answer 1

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