Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hiding column in jQuery dataTables

I have problem hiding jQuery datatable column. I want that column to retrieve data but I don't want it to be shown on the display page. I want to hide my column no 8 so from CSS I tried hiding it and it gives me collapsable div.

image getting + icon on display page

Below is my code for data table and class for hiding is "hideCol".

 var userTable = $('#user').dataTable( {
      "processing": true,
      "serverSide": true,
      "ajax":"admin/getData.php",
      "responsive" : true,
      "lengthMenu": [10, 25],
      "paginationType" : "input",
      columns: [
              { data:'param0'},
              { data: 'param1' },
              { data: 'param2' },
              { data: 'param3' },
              { data: 'param4' },
              { data: 'param5' },
              { data: 'param6' },
              { data: 'param7'},
          ],
      fnRowCallback:function(nRow,aData, iDisplayIndex, iDisplayIndexFull){
        var seenReportedVal =Number($('td:eq(7)', nRow).text());
        $('td:eq(7)', nRow).addClass('hideCol');
        if(seenReportedVal==0)
        {
         $(nRow).addClass('bold');
        }
      },
       "columnDefs": [
                       { "visible": false, "targets": 7 }
                     ],
    });  
like image 397
Ankita.P Avatar asked Oct 27 '14 10:10

Ankita.P


People also ask

How do I hide a column in HTML?

click(function () { $(". dynmic-hidden-col"). hide(); }); This way the table column can be hidden dynamically.

How do you get the dynamic column header and result from Ajax call in jquery DataTable?

how to get the dynamic column header and result from ajax call in jquery datatable. var $table=$('#MSRRes'). dataTable( { "bFilter": false, "bDestroy": true, "bDeferRender": false, "bJQueryUI": true, "oTableTools": { "sSwfPath": "swf/copy_cvs_xls_pdf.

Which button includes the Data Table command?

In DataTables As part of the DataTables constructor, the buttons option can be given as an array of the buttons you wish to show - this is typically just the button name, although you can provide options to customise the button's actions: $('#myTable'). DataTable( { buttons: [ 'copy', 'excel', 'pdf' ] } );


2 Answers

try using this code

var userTable = $('#user').dataTable( {
      "processing": true,
      "serverSide": true,
      "ajax":"admin/getData.php",
      "responsive" : true,
      "lengthMenu": [10, 25],
      "paginationType" : "input",
      columns: [
              { data:'param0'},
              { data: 'param1' },
              { data: 'param2' },
              { data: 'param3' },
              { data: 'param4' },
              { data: 'param5' },
              { data: 'param6' },
              { data: 'param7'},
          ],
       "columnDefs": [
                       { "visible": false, "targets": [7] }
                     ],
    });
like image 86
Aladdin Avatar answered Jan 02 '23 11:01

Aladdin


You may use visible property of columns. I suggest enclose object attributes with quotes e.g. "columns", "data" or "visible".

"columns": [
          { "data":'param0'},
          { "data": 'param1', "visible": false},
          { "data": 'param2'},
          { "data": 'param3'},
          { "data": 'param4'},
          { "data": 'param5'},
          { "data": 'param6'},
          { "data": 'param7'},
      ]
like image 35
Kursad Gulseven Avatar answered Jan 02 '23 12:01

Kursad Gulseven