Datatables - Having data from two arrays display

Question

I have two arrays that I am attempting to display in a table using Datatables.

I am successfully able to display one of the arrays just the way I am intending to do. When trying to include another array to display data from I am running into errors.

For example here is a code snippet of the successful showing of 1 array:

const data = [{
    title: "Walk in",
    totalRevenue: 2002,
    growth: 3.2
  }, {
    title: "Retail",
    totalRevenue: 1231,
    growth: 2.2
  },
  {
    title: "Hospital",
    totalRevenue: 5421,
    growth: 1.9
  },
  {
    title: "Online",
    totalRevenue: 2442,
    growth: 3.2
  },
  {
    title: "Fitness",
    totalRevenue: 8742,
    growth: 0.3
  }
]

const otherData = [{
  newTitle: 'More data',
  newTotalRevenue: 2000,
  newGrowthRate: 3.2
}]

var table = $('#example').DataTable({
  rowCallback: function(row, data, index) {
    if (data[2] < 3) {
      $(row).find('td:eq(2)').css('background-color', 'red');
    }
  },
  "columnDefs": [{
    "targets": [1, 2],
    "className": 'dt-body-right'
  }, ],
  data: data,
  responsive: true,
  paging: true,
  searching: false,
  bInfo: true,
  "order": [
    [2, "desc"]
  ],
  "pageLength": 20,
  columns: [{
      data: "title",
      title: "Title",
    },
    {
      data: "totalRevenue",
      title: 'Revenue'
    },
    {
      data: "growth",
      title: 'Revenue Growth'
    }

  ]
});

.background {
  background-color: blue;
}

.backgroud-red {
  background-color: red;
}

.background-yellow {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<table id="example" class="display" style="width:100%"></table>

My array data is being displayed by having data: data in my datatable configuration. I've attempted to include a second array such called otherData and include it in my datatable such as : data: [data, otherData] but when doing so I am unable to display any data from either arrays.

Is there a way to display more then one array of data in datatables?

Here is a link to a jsfiddle:

It is possible. But since the keys are different in the otherData array. Hence why it breaks. — Always Helping
– Always Helping, Commented Aug 4, 2020 at 0:25

Alexandre Elshobokshy · Accepted Answer · 2020-08-04 09:05:51Z

You've got several problems in your fiddle.

You're adding a 4th column that isn't available inside your data
The keys inside your second array needs to match columns.data inside your Datatables init
The way you're giving Datatables the set of data using an array of objects isn't how it's done and is a datatables syntax error

That being said, here's a working version :

const data = [{
    title: "Walk in",
    totalRevenue: 2002,
    growth: 3.2
  }, {
    title: "Retail",
    totalRevenue: 1231,
    growth: 2.2
  },
  {
    title: "Hospital",
    totalRevenue: 5421,
    growth: 1.9
  },
  {
    title: "Online",
    totalRevenue: 2442,
    growth: 3.2
  },
  {
    title: "Fitness",
    totalRevenue: 8742,
    growth: 0.3
  }
]

const otherData = [{
  title: 'More data',
  totalRevenue: 2000,
  growth: 3.2
}]

var dataSet = data.push(...otherData)

var table = $('#example').DataTable({
  rowCallback: function(row, data, index) {
    if (data[2] < 3) {
      $(row).find('td:eq(2)').css('background-color', 'red');
    }
  },
  "columnDefs": [{
    "targets": [1, 2],
    "className": 'dt-body-right'
  }, ],
  data: data,
  responsive: true,
  paging: true,
  searching: false,
  bInfo: true,
  "order": [
    [2, "desc"]
  ],
  "pageLength": 20,
  columns: [{
      data: "title",
      title: "Title",
    },
    {
      data: "totalRevenue",
      title: 'Revenue'
    },
    {
      data: "growth",
      title: 'Revenue Growth'
    }

  ]
});

.background {
  background-color: blue;
}

.backgroud-red {
  background-color: red;
}

.background-yellow {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<table id="example" class="display" style="width:100%"></table>

Collectives™ on Stack Overflow

Datatables - Having data from two arrays display

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related