如何在数据表JavaScript中创建垂直标题列表？ [英] How to do vertical header column table in datatable JavaScript?

问题描述

如何在数据表中创建垂直标题列？

How to do vertical header columns in datatable ?

它应该如下所示并作为数据表工作。

It should be as follows and working as datatble.

推荐答案

您不能使用数据表JS进行垂直标题列。但是，您可以创建原型html并设计第一列，使其看起来像标题，然后应用fixedHeader属性以使左侧列保持原样滚动。

You cannot do vertical header columns using datatable JS. However,you can create the prototype html and design the first column to look like header and then apply the fixedHeader property to be able to scroll with left column intact.

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>

这篇关于如何在数据表JavaScript中创建垂直标题列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！