Question

我尝试使用数据表在表中显示两个数组。

我能够按照我打算的方式成功显示其中一个数组。当尝试包含另一个数组以显示来自我的数据时，我遇到了错误。

例如，下面是成功显示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的链接：

Answer 1

你的小提琴有几个问题。

您要添加数据中不可用的第四列
第二个数组中的键需要与数据表init中的columns.data匹配
使用对象数组为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>

数据表-显示来自两个阵列的数据

1 个答案: