使用数据表或 HTML 表从 JSON 数组构建复杂的头表

Question

I have a JSON array of Objects which is loaded by Ajax. JSON is simple records from database I need to show it in Datatable or generate simple HTML table. Problem is that data is in simple row format but I need to display it in table with complex header and some row and column are also calculated from other columns eg. average salary. JSON data is also dynamic which is have data of 1 Month or more than one Month.

Below is the sample JSON data

[
    {
        "str": "41",
        "div": "Industries Div",
        "cat": "OFFICER",
        "mon": "Feb-2020",
        "sal": "4949892"
    },
    {
        "str": "248",
        "div": "Head Office",
        "cat": "OFFICER",
        "mon": "Feb-2020",
        "sal": "35394485"
    },
    {
        "str": "739",
        "div": "Health Div",
        "cat": "OFFICER",
        "mon": "Feb-2020",
        "sal": "96792134"
    },
    {
        "str": "2700",
        "div": "Education Div",
        "cat": "OFFICER",
        "mon": "Feb-2020",
        "sal": "111993656"
    },
    {
        "str": "567",
        "div": "Head Office",
        "cat": "STAFF",
        "mon": "Feb-2020",
        "sal": "31487211"
    },
    {
        "str": "2298",
        "div": "Education Div",
        "cat": "STAFF",
        "mon": "Feb-2020",
        "sal": "66639233.6"
    },
    {
        "str": "3865",
        "div": "Health Div",
        "cat": "STAFF",
        "mon": "Feb-2020",
        "sal": "140546070"
    },
    {
        "str": "241",
        "div": "Head Office",
        "cat": "OFFICER",
        "mon": "Jan-2020",
        "sal": "33243002"
    },
    {
        "str": "723",
        "div": "Health Div",
        "cat": "OFFICER",
        "mon": "Jan-2020",
        "sal": "94086161"
    },
    {
        "str": "2682",
        "div": "Education Div",
        "cat": "OFFICER",
        "mon": "Jan-2020",
        "sal": "112367649"
    },
    {
        "str": "549",
        "div": "Head Office",
        "cat": "STAFF",
        "mon": "Jan-2020",
        "sal": "30342281"
    },
    {
        "str": "2269",
        "div": "Education Div",
        "cat": "STAFF",
        "mon": "Jan-2020",
        "sal": "66289864"
    },
    {
        "str": "3852",
        "div": "Health Div",
        "cat": "STAFF",
        "mon": "Jan-2020",
        "sal": "139230281"
    }
]

And this is the screen shot of excel table in which format I need to build table

I have tried to build data table but having problem with multiple dynamic headers. I have tried and transform data and merged record based on Month and department. But it did not fulfill the requirements.

Below is the screenshot of datatable I have build so far

Answer 1

Use rowspan and colspan on the HTML DOM to setup the complex headers accordingly before initializing the data table.

This is a working example of multiple headers: https://datatables.net/examples/basic_init/complex_header.html