8

私はWebアプリを開発しています。このアプリは、さまざまなビューにいくつか（〜5）の異なるデータテーブルを表示します。データテーブルの1つだけについて、列名で一番上の行を非表示にしようとしましたが（ただし、他の行はこの行のままにしておきます）、成功しませんでした。私が見つけたソリューションのほとんどは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

javascriptソリューションが必要な場合はfnInitComplete、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();
    }
});

jQueryデータテーブルがスクロールを使用する場合、html構造は大きく異なります。jQueryデータテーブルは「2番目のテーブル」を使用してtheadを処理します。したがって、いつでもスクロールしてスレッドを見ることができます。したがって、適切なtheadを削除する場合は、dataTableラッパーを取得する必要があります。

もちろん、すべてのテーブルに対してそのようにすると、すべてのテーブルのすべてのコードが非表示になります。したがって、現在のテーブルの最初の行（cssクラスまたはテーブルの属性）を非表示にする必要があるかどうかを知るために何かを使用する必要があります。

ここに例としてjsfiddleがあります：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

スクロールが有効になっている場合（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_scrollHeadfnInitCompleteあります、あなたは以下のようにコールバックでこれをするかもしれません：

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

jsfiddleを参照してください。これで、問題が解決することを願っています。

于 2012-12-20T03:35:08.637 に答える
0

DataTablesが行うことは、別々のテーブルを含む2つの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 に答える