Datatable with colspan and rowspan

Datatable with colspan and rowspan

raphs13raphs13 Posts: 1Questions: 1Answers: 0

Hello,

I have a table that uses some colspan and rowspan, like this:

<thead class="bg-primary">
        <tr>
            <th colspan="2" rowspan="3" class="text-center">
                Grupo de Atendimento
            </th>
            <th colspan="1" rowspan="3" class="text-center">
                Campanha
            </th>
            <th colspan="4" class="text-center">
                Mailling
            </th>
            <th rowspan="3" class="text-center">
                Canais
            </th>
            <th colspan="5" class="text-center">
                Usuarios
            </th>
            <th colspan="11" class="text-center">
                <%= t(:item_71) %> - <%= t(:item_50) %> <%= @start_at.strftime("%H:%M") %> <%= t(:item_51) %> <%= @finish_at.strftime("%H:%M")%>
            </th>
        </tr>
        <tr>
            <th rowspan="2" class="text-center">
                Restantes
            </th>
            <th rowspan="2" class="text-center">
                Virgens
            </th>
            <th rowspan="2" class="text-center">
                Finalizados
            </th>
            <th rowspan="2" class="text-center">
                Agendamentos
            </th>
            <th rowspan="2" class="text-center">
                Livres
            </th>
            <th rowspan="2" class="text-center">
                Ocupados
            </th>
            <th rowspan="2" class="text-center">
                Intervalo
            </th>
            <th rowspan="2" class="text-center">
                Desconectados
            </th>
            <th rowspan="2" class="text-center">
                PE
            </th>
            <th colspan="2" class="text-center">
                Atendidas
            </th>
            <th colspan="2" class="text-center">
                Abandonadas
            </th>
            <th rowspan="" colspan="2" class="text-center">
                Espera
            </th>
            <th rowspan="" colspan="2" class="text-center">
                TNA
            </th>
            <th rowspan="2" class="text-center">
                NS
            </th>
            <th rowspan="2" class="text-center">
                Ocioso
                </th>
            </td>
            <th rowspan="2" class="text-center">
                AD
            </th>
        </tr>
        <tr>
            <th class="text-center">
                Qtd
            </th>
            <th class="text-center">
                Tempo
            </th>
            <th class="text-center">
                Qtd
            </th>
            <th class="text-center">
                Tempo
            </th>
            <th class="text-center">
                Qtd
            </th>
            <th class="text-center">
                Tempo
            </th>
            <th class="text-center">
                Qtd
            </th class="text-center">
            <th class="text-center">
                Tempo
            </th>
        </tr>
    </thead>
    <tbody>
    </tbody>

So, the problem is that when I apply datatable on this table it doesn't work property.

When i use, for example the function table.column( 2 ).visible( false ); datatable only hide the header, and not the entire column.

When i use

columnDefs: [
        { targets: [0, 1], visible: true},
        { targets: '_all', visible: false }
]

it hides the columns from the first line only.

I think the structure from the table isnt correct to datatables work, so anyone can help-me?

Thanks.

Answers

  • allanallan Posts: 61,878Questions: 1Answers: 10,138 Site admin

    Its very very close. You just need the first cell to be colspan=1 rather than 2: http://live.datatables.net/tebaleyu/1/edit . This is required as each column in the table must have a unique cell for the header - i.e. a single cell can't work for two different columns.

    Allan

This discussion has been closed.