加载时隐藏数据表

我正在使用jQuery DataTable v 1.10.11 ..我想隐藏整个表格和它显示的div，而数据表通过ajax调用从服务器加载数据..我搜索了但发现建议初始化ajax调用成功的表，我不能做，因为我在同一张表上执行许多任务，如添加/编辑/删除。下面是我的dataTable声明。加载时隐藏数据表

$(document).ready(function(){ 
//some code .... 

var listTable = $('#listTable').DataTable({ 
       'fnCreatedRow': function (nRow, aData, iDataIndex) { 
       $(nRow).attr('id', 'my' + iDataIndex); 
       $(nRow).attr('name', 'my' + iDataIndex); // or whatever you choose to set as the id 
       }, 
       "tableTools": { 
         "sSwfPath": "http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf", 
         "aButtons": [ 
          { 
           "sExtends": "copy", 
           "sButtonText": "Copy To ClipBoard", 
          }, 
          { 
           "sExtends": "xls", 
           "sFileName": "*.xls", 
           "sButtonText": "Download XLS", 
          }, 
          { 
           "sExtends": "print", 
          }       
        ] 
        }, 
        "bInfo": false, 
        "sEmptyTable": "There are no records", 
        "processing": true, 
        "oLanguage": { 
         "sProcessing": "<img src='${request.contextPath}/images/ajax-loader.gif'>" 
       }, 
       "dom": '<"toolbar">T<"clear">lfrtip', 
       "order": [[ 1, "desc" ]] 
    }); 

    $('.dataTables_empty').html(""); 

//some more code 
//some url 
listTable.ajax.url(url).load() 

    });

下面是表的HTML代码

<div id="data_table_travelHistory" style="margin:0 auto; padding-top:10px; width:90%;"> 
       <table cellpadding="0" cellspacing="0" border="0" id="listTable" style="width:100%;" class="table table-striped table-bordered"> 
       <thead class="alignCenter"> 
       <tr> 
      <th class="headerclass">Start Date</th> 
      <th class="headerclass">Approval Status</th> 
      <th class="headerclass">Created On</th> 
      <th class="headerclass">Action</th> 
       </tr> 
       </thead> 
       <tbody></tbody> 
       <tfoot class="alignCenter headerclass"> 
       <tr> 
      <th class="headerclass">Start Date</th> 
      <th class="headerclass">Approval Status</th> 
      <th class="headerclass">Created On</th> 
      <th class="headerclass">Action</th> 
       </tr> 
       </tfoot> 
       </table> 
      </div>

目前我能够显示GIF加载图片，而DataTable中加载。但初始化的表总是出现在背景看起来不太好的情况下。有没有办法我可以隐藏整个DataTable和它在哪里的div，并只显示加载栏....任何帮助将不胜感激...

来源

2016-04-22 Apoorv

你可以初始化表中的准备事件，然后添加删除一个显示/隐藏ajax请求结束处的表的css类。

来源

2016-04-22 22:47:31

gif可能在同一个容器内，你可以使用相同的方法来显示/隐藏gif。 –

加载时隐藏数据表

回答

相关问题