Datatables - отображение данных из двух массивов - PullRequest
Новая
       9

Datatables - отображение данных из двух массивов

0 голосов
/ 04 августа 2020

У меня есть два массива, которые я пытаюсь отобразить в таблице с помощью Datatables.

Я успешно могу отобразить один из массивов именно так, как я собираюсь это сделать. При попытке включить другой массив для отображения данных я получаю ошибки.

Например, вот фрагмент кода успешного отображения 1 массива: 

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>

Мой массив data отображается, имея data: data в моей конфигурации с данными. Я попытался включить второй массив, такой как otherData, и включить его в свою таблицу данных, например: data: [data, otherData], но при этом я не могу отобразить какие-либо данные из любого из массивов.

Есть ли способ отображения более одного массива данных в таблицах данных?

Вот ссылка на jsfiddle :

1 Ответ

1 голос
/ 04 августа 2020

У вас несколько проблем со скрипкой.

  • Вы добавляете 4-й столбец, который недоступен в ваших данных
  • Ключам внутри вашего второго массива нужны чтобы соответствовать columns.data внутри вашей Datatables init
  • То, как вы передаете Datatables набор данных с использованием массива объектов, не так, как это сделано, и является синтаксической ошибкой таблиц данных

При этом вот рабочая версия: 

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>
...