Jquery DataTables插件-隐藏列名称行
我正在开发一个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解决方案。
回答 4
Stack Overflow用户
发布于 2012-12-17 23:03:40
如果需要javascript解决方案，可以使用datatable的fnInitComplete参数。
$(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数据表使用“第二个表”来处理标题。所以你可以在任何时候滚动和查看该线程。因此，如果您想要删除好的标题，您需要检索dataTable包装器。
当然，如果你对所有的表都这样做，它会隐藏你所有的表头。因此，您必须使用一些信息来确定是否必须隐藏当前表的第一行( css类或表上的属性)。
下面是一个jsfiddle示例：http://jsfiddle.net/LqSwt/5/
Stack Overflow用户
发布于 2012-12-18 04:56:01
你应该使用css。要隐藏列标题的表，需要为其提供单独的类。可以为FYI - html元素分配多个类，主要是出于这样的原因。
因此，在html中声明表时，如下所示：
<table id="myTable" class="noHeader">然后，在css中，您可以使用：
.noHeader thead { display:none;}Stack Overflow用户
发布于 2012-12-20 11:35:09
如果启用了滚动功能(在dataTables初始化选项中设置了sScrollX/ sScrollY )，dataTables将更改表格结构，如下所示：
div.dataTables_scroll
div.dataTables_scrollHead
div.dataTables_scrollBody
[div.dataTables_scrollFoot]并且标题被克隆到div.dataTables_scrollHead > table，scrollBody中的原始标题被隐藏，以便在垂直滚动时获得固定的标题。
因此，在您的情况下，您必须在 div.dataTables_scrollHead，中隐藏克隆的 thead，您可以在fnInitComplete回调中执行此操作，如下所示：
"fnInitComplete": function(oSettings) {
$('.dataTables_scrollHead thead').hide();
}看看jsfiddle，希望这能解决你的问题。
https://stackoverflow.com/questions/13916518
复制相似问题
腾讯云开发者
