8

我正在开发一个网络应用程序，它在不同的视图中显示了几个（~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

4 回答 4

6

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/

于 2012-12-17T15:03:39.837 回答
1

你应该使用css。表中要隐藏的列标题需要给一个单独的类。仅供参考 - html 元素可以分配多个类，主要是出于这样的原因。

因此，当您声明表格时，在您的 html 中执行以下操作：

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

然后在css中你可以使用：

.noHeader thead { display:none;}
于 2012-12-17T20:56:00.743 回答
0

我认为 DataTables 所做的是创建两个 div，其中包含单独的表。它创建一个带有嵌套表的“标题” div，然后为正文创建一个相同的表。

尝试在表格完成后运行此代码，甚至可能在上面建议的 fnInitComplete 处理程序之后运行。

$(.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.
于 2012-12-21T23:52:18.823 回答
0

如果启用滚动（sScrollX/sScrollY在 dataTables 初始化选项中设置），dataTables 将更改表结构，如下所示：

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

并且将thead克隆为div.dataTables_scrollHead > table，将scrollBody中原来的thead隐藏起来，以便在垂直滚动时得到一个固定的thead。

因此，在您的情况下，您必须将克隆的thead隐藏在 中div.dataTables_scrollHead，您可以在fnInitComplete回调中执行此操作，如下所示：

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

请参阅jsfiddle，希望这能解决您的问题。

于 2012-12-20T03:35:08.637 回答