9

内部にデータ (行) がない場合、テーブルを非表示にすることはできますか? query datatables プラグインを使用しています。

ドキュメントにオプションが見つかりませんでした。

4

7 に答える 7

12

良い提案にもかかわらず、私はまだ（別の）答えが必要だと思います。

  1. dataTables を使用すると、aが空<table>になることはありません。:empty<thead><tbody>

  2. を非表示にするだけでは不十分です。スタイル テーブル、ページネーション、フィルター ボックスなどを含むも<table>非表示にする必要があります。*_wrappper<div>

以下を利用できますfnInitComplete。

$('#table').dataTable({
   //initialization params as usual
   fnInitComplete : function() {
      if ($(this).find('tbody tr').length<=1) {
         $(this).parent().hide();
      }
   } 
});

にデータを保持する行がない場合、これにより dataTable とそのすべての自動生成されたコンテンツが非表示になり<tbody>ます。

アップデート

[明確化のためにコメントを参照してください] 次に、まったく別のアプローチが必要です。これは Chrome と FireFox で動作しますが、IE ではわかりません:

を忘れてfnInitComplete、代わりに次のコードを使用してください。

var dataTable = $('#table').dataTable();

$("#table").on('DOMNodeInserted DOMNodeRemoved', function() {
  if ($(this).find('tbody tr td').first().attr('colspan')) {
    $(this).parent().hide();
  } else {
    $(this).parent().show();
  }
});

//this shows the dataTable (simplified)
dataTable.fnAddData(
    ['a','b','c','d','e']
);

//this hides it (assuming there is only one row)
dataTable.fnDeleteRow(0);
于 2013-10-10T17:36:44.767 に答える
2

これも同様に機能することがわかりました：

$('#table').dataTable({
    fnDrawCallback : function() {
        if ($(this).find('.dataTables_empty').length == 1) {
           $(this).parent().hide();
        }
    }
});

警告: 検索しても結果がない場合、テーブル全体が非表示になります。

于 2017-09-26T20:48:56.943 に答える
0

テーブルを非表示にする場合は、子タグが含まれていない場合 (つまり、 の場合) :empty、css から疑似クラスを使用できます。

そんな感じ：

table:empty {display: none}

于 2013-10-10T13:19:42.937 に答える