Question

我的页面有问题。我有很多内容要在jQuery表中显示给用户。然而，当页面加载时，表格显示所有行，页面将变为10000行而不是10行（和分页）。

所以我想隐藏表，直到它加载所有数据（可能在那里加载图像），当它加载时我想显示带有加载内容的表。

我该怎么做？

Answer 1

我通常将样式“display：none”应用于目标容器，然后您可以使用.load（）函数并使用回调来显示填充数据的容器。

基本上：

$('#target').hide();
$('#target').addClass("loading-layer");
$('#target').load('toto.php',function(){
    $('#target').removeClass("loading-layer");
    $('#target').show();
});

修改

我今天早上刚刚尝试在加载后显示数据表，你可以这样做：

<div id="data-container" class="hidden"> <table id="table-courses" cellpadding="0" cellspacing="0" border="0" class="display ex_highlight data-table table-font" > ... </table> </div> <script type="text/javascript"> $(document).ready(function() { $('#data-container').show(); //Data table creation oTable = $('#my-table').dataTable({ "bJQueryUI": true }); }); </script>

Answer 2

您应该隐藏表格，以便浏览器在开始时（甚至在加载时）不会呈现它：

<table id="data" style="display:none;">

（请注意，这会使您的页面对非js用户无法使用，可能以下情况会更好：

<script type="text/javascript"><![CDATA[
    document.write("<style>hidden { display:none; }</style>");
]]></script>
<table id="data" class="hidden">

然后，只要加载表（onDOMready），就可以动态删除一些列，然后显示其余列：

$(document).ready(function() {
// wait for images and other included objects to load, use
// $(window).load(function() {
    var table = $("#data");
    table.startPageViewer(); // or whatever

    table.show();
    // or, respectively:
    table.removeClass("hidden");
});

您也可以动态创建整个表，并以较短的（非HTML）格式提供数据，以加载加载，尤其是在并行异步完成时。

Btw：你提到了分页 - 这比同时加载所有数据要好得多。

如何在页面加载后显示页面内容？

2 个答案: