CODEWITHSUNDEEP
jquerydatatables
Ravi Krishan
Ravi Krishan

Reputation: 83

show hide multiple columns in jquery datatable.net

Is there any convenient way to show/hide table columns in jquery datatable plugin? I am using http://datatables.net/api to create a grid of boxes. with fixed header and fixed column. Which is working fine.

$(document).ready(function() {
             //var selectedElementId = '{!selectedElementId}';
            var oTable = $('#masterGridTable').dataTable( {
                "sScrollY": "255px",
                "sScrollX": "100%",
                "sScrollXInner": "150%",
                "bScrollCollapse": false,
                "bPaginate": false,
                "bFilter": false,
                "bInfo": false,
                "fnInitComplete": function(oSettings, json) {

                }
            } );
            new FixedColumns( oTable );
        } );

following is the screen shot for this. enter image description here

Now in the grid there are 15 minutes blocks starting from 8:15AM to 4:15PM Requirement is to make a filter of Morning /Afternoon so that selecting morning hides all blocks from 12:00Pm to 4:15Pm and AFternoon hides morning entries. (8:15 AM to 12:00PM)

I tried using fnSetColumnVis function to show hide columns inside a loop. Code :

function toggleShift(th){
        var selectedShift=$(th).val();
        var oTable = $('#masterGridTable').dataTable();
        if(selectedShift =='Full Day'){
            var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
            oTable.fnDraw();
        }else if(selectedShift =='Morning'){
            $('.dataTables_scrollHeadInner table.dataTable tr:nth-child(2) .PM').each(function(){
                var indexV = $(this).index();
                oTable.fnSetColumnVis( indexV , false );
            });
        }else if(selectedShift =='Afternoon'){
            $('.dataTables_scrollHeadInner table.dataTable tr:nth-child(2) .AM').each(function(){
                var indexV = $(this).index();
                oTable.fnSetColumnVis( indexV , false );
            });
        }

this funcion calls onchange event of drop down on top right (beside today text in image) This works (not properly) 1. Hides wrong columns 2. Its super slow :( Any idea how to do that properly.

Upvotes: 2

Views: 8600

Answers (2)

MaVRoSCy
MaVRoSCy

Reputation: 17839

yeap, you can do it like this:

First take var oTable out of the document.ready function, so that you have a reference to your table globally after you initialize it.

Then use:

var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true ); //This creates a toggle effect

//or
oTable.fnSetColumnVis( iCol,false);//hide
oTable.fnSetColumnVis( iCol,true);//show

Where iCol is the number of the column you want to hide.

Enjoy

More info here http://datatables.net/examples/api/show_hide.html

Upvotes: 2

Ravi Krishan
Ravi Krishan

Reputation: 83

This is how i did. Which is working fine. here what i am doing is that i am calling toggleShift() method on onchangeEvent of the list. inside that i make server side call. and on completion of that i am calling refresh table method which is just recreating the instance of the table.

function refreshTable(){
             var oTable = $('#masterGridTable').dataTable( {
                "sScrollY": "255px",
                "sScrollX": "100%",
                "sScrollXInner": "150%",
                "bScrollCollapse": false,
                "bPaginate": false,
                "bFilter": false,
                "bInfo": false,
                "fnInitComplete": function(oSettings, json) {

                }
            } );
            new FixedColumns( oTable );
            $('#busyMsgDiv').hide();
        }
        function toggleShift(th){
            $('#busyMsgDiv').show();
            var selectedShiftVal = $(th).val() ;
            console.log(selectedShiftVal);
            changeShift1();
        }

Upvotes: 1

Related Questions