没有数据时如何制作不可见的数据表

没有数据时如何制作不可见的数据表

本文介绍了没有数据时如何制作不可见的数据表?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

当表格里面没有任何数据(行)时,是否可以隐藏表格?我正在使用查询数据表插件.

我在文档中找不到任何选项.

解决方案

尽管提出了很好的建议,但我认为仍然需要(另一个)答案.

  1. 使用 dataTables,

    永远不会为空 - 或 :empty - 因为 dataTables 强制你有一个

  2. 隐藏

  3. 是不够的,还必须隐藏*_wrappper——

    code> 包含样式表、分页、过滤器框等.

    您可以利用 fnInitComplete :

    $('#table').dataTable({//像往常一样初始化参数fnInitComplete:函数(){if ($(this).find('tbody tr').length

    这将隐藏 dataTable 及其所有自动生成的内容,如果

    中没有包含数据的行.

    更新

    [请参阅评论以澄清] 那么您需要一种完全不同的方法.这适用于 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();} 别的 {$(this).parent().show();}});//这显示了数据表(简化)数据表.fnAddData(['a','b','c','d','e']);//这将它隐藏起来(假设只有一行)数据表.fnDeleteRow(0);

    Is it possible to hide a table when it doesn't have any data(rows) inside?I'm using the query datatables plugin.

    I couldn't find any option in the documentation.

    解决方案

    Despite good suggestions I think there still needs (another) answer.

    1. Using dataTables a <table> will never be empty - or :empty - since dataTables enforces you to have a <thead> and a <tbody>

    2. It is not enough to hide the <table>, you must hide the *_wrappper also - the <div> that contains the styled table, pagination, filter-box and so on.

    You can take advantage of fnInitComplete :

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

    This will hide the dataTable and all its autogenerated content, if there is no rows holding data in <tbody>.


    Update

    [See comments for clarification] Then you need a completely other approach. This works in Chrome and FireFox, cant tell for IE :

    Forget about fnInitComplete, use the following code instead :

    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);
    

    这篇关于没有数据时如何制作不可见的数据表?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

    08-05 00:12