Как изменить мой код, чтобы иметь многострочный заголовок в datatable?

Question

Нужна помощь для создания заголовка нескольких строк для данных. Я хочу добавить заголовок «Цель» поверх «Веб», «База данных», «Приложение».

Моя текущая таблица: Мой стол

Ожидаемый заголовок: Ожидаемый заголовок

Ниже мой код:

$('#myServerDatatable').dataTable({
                "destroy": true,
                data: serverItems,
                columns: [
                   [ {
                        title: "No",
                        render: function (data, type, row, meta) {
                            return meta.row + 1; // This contains the row index
                        }
                    },
                    { title: "Hostname", data: "Hostname_server" },
                    { title: "Operating System", data: "Os_server" },
                    { title: "IP Address", rowspan: "2", data: "Ipaddress_server" },                 
                    { title: "Web", data: "Web_server"},                   
                    { title: "Database", data: "Database_server" },
                    { title: "Application", data: "App_server" },
                    { title: "Remarks", data: "Remarks_server" },
                    {
                        title: "",
                        render: function (data, type, row, meta) {
                            var a = '<button type="button" class="editButton"> Edit </button>';
                            var b = '<button type="button" class="deleteButton"> Delete </button>';
                            return a + " " + b;
                        }
                        }],

                ],             
            });

В настоящее время мне только что удалось показать заголовок одной строки. Я не знаю, как сделать заголовок из нескольких строк.

Answer 1

См. Следующий фрагмент.Вы можете достичь их, используя rowspan и colspan.

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th rowspan="2">No</th>
                <th rowspan="2">Host Name</th>
                <th rowspan="2">Operating System</th>
                <th rowspan="2">IP Address</th>
                <th colspan="3">Purpose</th>
            </tr>
            <tr>
                <th>Web</th>
                <th>Database</th>
                <th>Application</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>hname 1</td>
                <td>os 1</td>
                <td>ip 1</td>
                <td>web 1</td>
                <td>db 1</td>
                <td>app 1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>hname 2</td>
                <td>os 2</td>
                <td>ip 2</td>
                <td>web 2</td>
                <td>db 2</td>
                <td>app 2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>hname 3</td>
                <td>os 3</td>
                <td>ip 3</td>
                <td>web 3</td>
                <td>db 3</td>
                <td>app 3</td>
            </tr>
            
        </tbody>
        
    </table>

Подробнее см. ЭТО