Question

如何在数据表中执行垂直标题列？

它应该如下并作为datatble工作。

Answer 1

你正在寻找数学中称为矩阵转置的东西。转换矩阵/表将行转换为列。

response.body()

输出：

<?php

$table = [
    ['Username', 'Col1', 'Col2', 'Col3', 'Col4'],
    ['Balakumar', 3, 2, 5, 85]
];

function printTable($rows) {
    foreach ($rows as $row) {
        foreach ($row as $value) {
            printf("%10s", $value);
        }
        echo PHP_EOL;
    }
}


function transposeTable($table) {
    $rowsCount = count($table);
    $columnsCount = count($table[0]);

    for ($row = 0; $row < $rowsCount; $row++) {
        for($column = 0; $column < $columnsCount; $column++) {
            $transpose[$column][$row] = $table[$row][$column];
        }
    }
    return $transpose;

}

echo 'Table :' . PHP_EOL;
printTable($table);
echo 'Transpose:' . PHP_EOL;
printTable(transposeTable($table));

?>

Answer 2

您无法使用datatable JS执行垂直标题列。但是，您可以创建原型html并将第一列设计为看起来像标题，然后应用fixedHeader属性以便能够滚动左列完整。

this.dTable = $('#vdatatable').DataTable({
    dom:            'ftip',
    stateSave:      saveState,
    retrieve:       true,
    autoWidth:      false,
    info:           true,
    paging:         false,
    scrollY:        false,
    scrollX:        true,
    scrollCollapse: false,
    fixedHeader:    true,
    fixedColumns:   {
        leftColumns: 1
    },
}):

.vertical-header-column {
  font-weight: bold;
  color: #C6DBEA;
}

<table id="vdatatable" class="display">
    <thead>
        <tr>
            <th data-column="Username" class="vertical-header-column">Username</th>
            <th data-column="Balakumar">Balakumar</th>
        </tr>
    </thead>
    <tbody>
        <tr>            
            <th data-column="Username" class="vertical-header-column">Col1</th>
            <td data-column="Balakumar">3</td>
        </tr>
        <tr>
            <th data-column="Username" class="vertical-header-column">Col2</th>
            <td data-column="Balakumar">2</td>
        </tr>
        <tr>
            <th data-column="Username" class="vertical-header-column">Col3</th>
            <td data-column="Balakumar">5</td>
        </tr>
        <tr>        
            <th data-column="Username" class="vertical-header-column">Col4</th>
            <td data-column="Balakumar">85</td>
        </tr>
    </tbody>
</table>

Answer 3

你必须使用html属性。尝试使用标签。用PHP填写此标签。也许foreach将是有用的！希望我帮助你！

如何在数据表JavaScript中执行垂直标题列表？

3 个答案: