Jquery DataTables插件 - 隐藏列名称行

Question

我正在开发一个Web应用程序,它在不同的视图中显示很少(~5)个不同的数据表.我尝试使用列名隐藏顶行,仅用于其中一个数据表(但保留另一个数据表),但没有成功.我发现的大多数解决方案都使用CSS,这导致该行从我的应用程序中的所有数据表中消失.有人知道一个很好的解决方案吗？

以下是我在应用中创建数据表的示例:

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" }
            ]
        });

这是我试过的css代码:

.dataTables_wrapper table thead {
    display:none;
}

我更喜欢JavaScript解决方案.

Answer 1

如果你想要一个javascript解决方案,你可以使用fnInitCompletedatatable 的参数.

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

当jQuery数据表使用滚动时,html结构非常不同.jQuery数据表使用"第二个表"来处理thead.所以你可以随时滚动并查看该主题.因此,如果要删除好的thead,则需要检索dataTable包装器.

当然,如果你对所有表都这样做,它将隐藏你所有表的所有内容.所以你必须使用一些东西来知道你是否必须隐藏当前表的第一行(css类或表中的属性).

这里有一个jsfiddle例子:http://jsfiddle.net/LqSwt/5/