CODEWITHSUNDEEP
javascriptjquerycssdatatables
Asaf
Asaf

Reputation: 2168

Jquery DataTables plugin - hide columns name row

I'm developing a web app, which present few (~5) different data tables in different views. I tried hiding the top row with the columns name, for just one of the data tables (but keep the other with this row), but with no success. Most of the solutions I found are using CSS, which caused this row to disappear from all data tables in my app. Does anybody know a good solution for that?

Here is an example of how I'm creating a data table in my app:

this._currentDiv = $('<div></div>');
this._stopsTable = $('<table></table>');
$(this._currentDiv).append(this._stopsTable);
$(this._currentDiv).append(self._stopsTable);
        $(this._currentDiv).append(data);
        $(this._stopsTable).dataTable({
            "bJQueryUI": true,
            "bPaginate":false,
            "bLengthChange":false,
            "bFilter":false,
            "bSort":false,
            "bInfo":false,
            "bAutoWidth":false,
            "sScrollY": "100px",
            "aoColumns":[
                { "sTitle":"a" },
                { "sTitle":"b" },
                { "sTitle":"c" }
            ]
        });

and here is the css code I tried:

.dataTables_wrapper table thead {
    display:none;
}

I prefer a JavaScript solution if available.

Upvotes: 8

Views: 8377

Answers (4)

lorengphd
lorengphd

Reputation: 1170

What I think DataTables does is create two divs with separate tables in them. It creates a "header" div with a nested table then the same for the body.

Try running this code after the table is complete, maybe even after the fnInitComplete handler suggested above.

$(.dataTables_scrollHeadInner).find("tr").hide(); //The class name may differ for you.  Use firebug to find class name of that div that contains your header.

Upvotes: 0

Magus
Magus

Reputation: 15124

If you want a javascript solution, you can use the fnInitComplete parameter of datatable.

$(this._stopsTable).dataTable({
    "bJQueryUI": true,
    "bPaginate":false,
    "bLengthChange":false,
    "bFilter":false,
    "bSort":false,
    "bInfo":false,
    "bAutoWidth":false,
    "sScrollY": "100px",
    "aoColumns":[
        { "sTitle":"a" 
           "sTitle":"b" 
           "sTitle":"c" }
    ],
    "fnInitComplete" : function(oSettings, json) {
        // Find the wrapper and hide all thead
        $(this._stopsTable).parents('.dataTables_wrapper').first().find('thead').hide();
    }
});

When jQuery datatable use a scroll, the html structure is very different. jQuery datatables use a "second table" to handle the thead. So you can scroll and look at the thread anytime. So if you want to remove the good thead, you need to retrieve the dataTable wrapper.

Of course, if you do that way for all tables, it will hide all thead of all your tables. So you must use something to know if you must hide the first row for the current table (a css class or an attribute on the table).

Here a jsfiddle as example : http://jsfiddle.net/LqSwt/5/

Upvotes: 6

Roy Ling
Roy Ling

Reputation: 1632

If scrolling is enabled (sScrollX / sScrollY is set in dataTables init options), dataTables will change the table structure like below:

div.dataTables_scroll
   div.dataTables_scrollHead
   div.dataTables_scrollBody
   [div.dataTables_scrollFoot]

And the thead is cloned to div.dataTables_scrollHead > table, the original thead in scrollBody is hidden, in order to get a fixed thead when scrolling vertically.

Thus, in your case, you have to hide the cloned thead in div.dataTables_scrollHead, you may do this in fnInitComplete callback as below:

"fnInitComplete": function(oSettings) {
    $('.dataTables_scrollHead thead').hide();
}

See the jsfiddle, hope this will solve your problem.

Upvotes: 0

David Stetler
David Stetler

Reputation: 1451

You should use css. The table that you want to hide the column titles you need to give a separate class. FYI - html elements can be assigned multiple classes, mostly for reasons like this.

so in your html when you declare the table, do it like this:

<table id="myTable" class="noHeader">

then in css you can use:

.noHeader thead { display:none;}

Upvotes: 1

Related Questions