Jquery DataTables plugin - hide columns name row

Question

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.

Answer 1

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/

Answer 2

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