Question

需要帮助为数据表创建多行标题。我想在“ Web”，“数据库”，“应用程序”的顶部添加标题“ Purpose”。

我当前的表格： My table

下面是我的代码：

$('#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>

有关更多详细信息，请参见THIS

如何修改我的代码以使其在数据表中具有多个行标题？

1 个答案: