javascript - 数据表 - 显示来自两个数组的数据

Question

我有两个数组，我试图使用 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的链接：

标签： javascriptjqueryarraysdatatables

Answer 1

你的小提琴有几个问题。

• 您正在添加数据中不可用的第 4 列
• 第二个数组中的键需要columns.data在 Datatables init中匹配
• 您使用对象数组为 Datatables 提供数据集的方式不是它的完成方式，而是 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>