CODEWITHSUNDEEP
jquerydatatables
user3201500
user3201500

Reputation: 1618

Hide few column from default in datatable

I am new to datatable, i am using colvis to show the columns in table, all the data i am getting from my database and i would like to keep few fields hidden by default. I am using this method to extends.

var oTable = table.dataTable({
        "language": {
            "aria": {
                "sortAscending": ": activate to sort column ascending",
                "sortDescending": ": activate to sort column descending"
            },
            "emptyTable": "No data available in table",
            "info": "Showing _START_ to _END_ of _TOTAL_ entries",
            "infoEmpty": "No entries found",
            "infoFiltered": "(filtered1 from _MAX_ total entries)",
            "lengthMenu": "_MENU_ entries",
            "search": "Search:",
            "zeroRecords": "No matching records found"
        },



        buttons: [
            { extend: 'csv', className: 'btn purple btn-outline ' },
            { extend: 'colvis', className: 'btn dark btn-outline', text: 'Columns'}
        ],



        "pageLength": 20,

        "dom": "<'row' <'col-md-12'B>><'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>"

    });
}

Now i dont know how can i keep columns hidden by default and show only if user select.

Hide few columns by default when table load.

Thank you!

Upvotes: 4

Views: 5819

Answers (3)

Haris ur Rehman
Haris ur Rehman

Reputation: 2663

I hide the fifth column with following code:

"aoColumns": [
    null, 
    null, 
    null, 
    null, {
      "bVisible": false,
      "bSearchable": false,
    },
   null
],

Upvotes: 0

Shady Alset
Shady Alset

Reputation: 5714

Add className: 'hidden' to the column you want to be hidden for responsive table.

something like this:

$('#example').dataTable({
    "columnDefs": [
        { "visible": false, "targets": [0], className: 'hidden' }
    ]
});

Upvotes: 4

Gyrocode.com
Gyrocode.com

Reputation: 58860

Use columnDefs.visible option along with columnDefs.targets option to define what columns will be hidden initially.

$('#example').dataTable( {
  "columnDefs": [
    // Hide second, third and fourth columns
    { "visible": false, "targets": [1, 2, 3] }
  ]
} );

Upvotes: 1

Related Questions