show hide multiple columns in jquery datatable.net

Question

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.

MaVRoSCy · Accepted Answer · 2014-06-16 06:57:55Z

2

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

edited Jun 16, 2014 at 6:57

answered Aug 30, 2013 at 11:31

MaVRoSCy

17.9k15 gold badges87 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ravi Krishan Over a year ago

thanks for the reply, but The problem is that There are more then 160 columns in the table, and need to hide half columns at a time, The code works, but it is very very slow.

Michel Ayres Over a year ago

Well, that fix my problem

Ravi Krishan · Accepted Answer · 2013-09-02 16:45:27Z

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();
        }

Collectives™ on Stack Overflow

show hide multiple columns in jquery datatable.net

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related