在 jquery 数据表中显示数据

Question

我需要指导在 jquery 数据表中显示以下数据。 数据如下图：

let resultList = [{ Name: “User 1”, ID: 1, Course: “ABC”, 
    Scores: [
        {Englisth: 80;Spanish: 75;Math: 100;History:90},
        {Englisth: 81;Spanish: 76;Math: 70;History:80},
        {Englisth: 70;Spanish: 55;Math: 80;History:70}
    ]
}]

resultList 是一个数组，其中包含另一个名为 Scores 的数组。

我想在数据表中显示上述数据，如下所示，

我查看了rows().add()和columnDfs选项，但我不知道如何显示这些数据。

columns: [
        { title: "Name", defaultContent: "" },
        { title: "ID", defaultContent: ""  },
        { title: "Course", defaultContent: "" },
        { title: "English", defaultContent: "" },
        { title: "Spanish", defaultContent: ""  },
        { title: "Math", defaultContent: "" },
        { title: "History", defaultContent: "" }
    ],
    columnDefs: [],
    select: {
        style: 'multi',
        selector: 'td:first-child',
        className: 'selected bg-selected-row'
    },
    order: [1, 'asc']
});

非常感谢任何建议。

Answer 1

您在这里遇到的问题是您想在表格中显示分数，但正在为用户获取记录。 您必须重新格式化数据才能在表格中显示，如下所示：

//Convert data into required format
var resultListFinal = [];
resultList.map(function(val) {
  val.Scores.map(function (score) {
    resultListFinal.push({
      'Name': val.Name,
      'ID': val.ID,
      'Course': val.Course,
      'English': score.English, //Note: I have corrected the spelling of English
      'Spanish': score.Spanish,
      'Math': score.Math,
      'History': score.History
    });
  });
});

然后将数据表应用于重新格式化的数组，如下所示：

$('#resultTable').DataTable({
  data: resultListFinal, //This is the reformatted array
  columns: [{
    title: 'Name',
    data: 'Name'
  }, {
    title: 'ID',
    data: 'ID'
  }, {
    title: 'Course',
    data: 'Course'
  }, {
    title: 'English',
    data: 'English'
  }, {
    title: 'Spanish',
    data: 'Spanish'
  }, {
    title: 'Math',
    data: 'Math'
  }, {
    title: 'History',
    data: 'History'
  }]
});

您可以在 codepen https://codepen.io/prinkpan/pen/jOWbxdm中查看整个解决方案