0

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

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

我怎样才能做到这一点？

4

4 回答 4

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>
于 2012-09-18T19:22:26.010 回答
0

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

<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）格式提供数据，从而加快加载速度，尤其是在并行异步完成的情况下。

顺便说一句：你提到了分页——这比同时加载所有数据要好得多。

于 2012-09-18T19:21:33.553 回答
0

http://jsfiddle.net/jklm313/hfUSg/1/ 使用以下方法在页面加载后从正文中删除带有“显示：无”的类：

$("window").load(function() {
  $("body").removeClass("preload");
});

至于禁用 javascript 的浏览器：

<noscript>
    <style>        
        .preloader {display: block;}
    </style>
</noscript>
于 2012-09-18T20:00:36.953 回答
0

我猜你陷入了 FOUC（无样式内容的 Flash）

克服此问题的典型方法是将包含表的 div 设置为

可见性：隐藏；虽然dom仍在浏览器中处理，一旦完成

文件准备好你取消隐藏你的 div

$('#customtabs').css('visibility','visible');

你可以看到这个例子

于 2012-09-18T20:12:04.233 回答