Column Visibility DataTables

Question

Column Visibility DataTables

Navigation

#1 by (1 votes)
#2 by (1 votes)

2

I'm using DataTables to display and export my tables, one of the types of datatables I use and this one here:

link

I would like to know if it is possible to set at startup which columns should be omitted and then optionally display them through the button?

Example: I have a table with the following columns

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

I would like only the Name,Position,Salary columns to appear, and the others only appear when I click the button.

php javascript jquery jquery-datatables

asked by anonymous 04.07.2018 / 14:32

2 answers

Recursive program question for writing vowels in C If inside the button

score 1 · Answer 1

Well in search and with the tip of Caique Romero, I was able to solve the problem.

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

So my script stayed with the fields that I want to export, I added columnDefs to hide a certain column of the table the targets defines which columns I want to hide from the table always starting from 0, being the cult with colvis I can display it again.

score 1 · Answer 2

Simply define the column (s) you want with "visible": false , within 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><scriptsrc="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><scriptsrc="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><linkrel="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>