javascript - 加载时隐藏数据表

Question

我正在使用 jquery DataTable v 1.10.11 .. 我想在数据表通过 ajax 调用从服务器加载数据时隐藏整个表和显示它的 div .. 我进行了搜索，但找到了初始化建议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 及其所在的 div，并且只显示加载栏....任何帮助将不胜感激...

Answer 1

您可以在就绪事件中初始化表格，然后添加删除在ajax请求末尾显示/隐藏表格的CSS类。