2

Estou usando o DataTables para exibição e exportação das minhas tabelas, uma dos tipos de datatables que eu utilizo e esse aqui:

https://datatables.net/extensions/colreorder/examples/integration/colvis.html

Gostaria de saber se é possível definir na inicialização quais colunas devem ser omitidas para depois opcionalmente exibi-las através do botão?

Exemplo: Possuo uma tabela com as seguintes colunas

Name,Position,Office,Age,Start date,Salary

E gostaria que aparecesse apenas as colunas Name,Position,Salary, e as outras só aparecessem quando eu clicasse no botão.

4
  • o mesmo evento que você chama para esconde ou mostra as colunas você chama na renderização da tela e diz quais colunas você que :) Commented 4/07/2018 às 12:44
  • teria como me mostrar como faço isso @MarconcilioSouza Commented 4/07/2018 às 12:45
  • nesse caso @CaiqueRomero não tem como exibir as colunas que estão ocultas preciso que tenha a opção de exibição igual no exemplo que passei Commented 4/07/2018 às 12:51

2 Respostas 2

1

Basta definir a(s) coluna(s) que deseja com "visible": false, dentro de columnDefs:

$(document).ready(function() {
    var table = $('#example').DataTable( {
        dom: 'Bfrtip',
        colReorder: true,
        "columnDefs": [
            {
                "targets": [ 2 ], //Índice do vetor representa a 3º coluna
                "visible": false,
                "searchable": false
            },
            {
                "targets": [ 3 ],
                "visible": false,
                "searchable": false
            },
            {
                "targets": [ 4 ],
                "visible": false,
                "searchable": false
            }
        ],
        buttons: [
            'colvis'
        ]
    });
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/colreorder/1.5.1/js/dataTables.colReorder.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.5.1/css/colReorder.dataTables.min.css">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
    </tr>
  </tbody>
</table>

1

Bom em pesquisa e com a dica do Caique Romero, consegui resolver o problema.

    $(document).ready( function () {
        $('#table').DataTable( {
            "dom": 'Bfrtip',
            "buttons": [
                'copy', 'csv', 'excel', 'pdf',  'print', 'colvis' 
            ],
            "columnDefs": [
                {
                    "targets": [ 0 ],
                    "visible": false,
                }
            ],
        } );
        
    } );

então meu script ficou assim com os campos que eu quero exportar, adicionei o columnDefs para ocultar determinada coluna da tabela o targets define quais colunas quero ocultar da tabela sempre começando do 0, estando o culto com o colvis eu consigo exibi-lo novamente.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .