在 jquery 数据表中显示数据

Question

I need guidance in displaying the following data in jquery datatable. The data is as shown below:

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}
    ]
}]

The resultList is an array and it has another array in it called Scores.

I want to display the above data in datatable as shown below,

I looked at both, rows().add() and columnDfs options but I don't get how to display this data.

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']
});

Any suggestion is greatly appreciated.

Answer 1

The problem you have here is you want to display the scores in table, but are fetching the records for user. You will have to reformat the data for displaying it in the table as shown below:

//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
    });
  });
});

Then apply datatable to the reformatted array like this:

$('#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'
  }]
});

You can check the entire solution in codepen https://codepen.io/prinkpan/pen/jOWbxdm