我的页面有问题。我有很多内容要在 jQuery 表中显示给用户。但是，当页面加载时，表格会显示所有行，并且页面将像 10000 行一样长，而不是 10 行（和分页）。
所以我想隐藏表格，直到它加载所有数据（可能在那里放一个加载图像），当它加载后我想显示表格及其加载的内容。
我该怎么做？
【问题讨论】：
标签： javascript jquery ajax html
我通常将样式“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>
【讨论】：
您应该隐藏表格，使其在开始时（甚至在加载时）不会被浏览器呈现：
<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）格式提供数据，从而加快加载速度，尤其是在并行异步完成的情况下。
顺便说一句：您提到了分页 - 这比同时加载所有数据要好得多。
【讨论】：
http://jsfiddle.net/jklm313/hfUSg/1/ 页面加载后使用以下方法从正文中删除带有“显示：无”的类：
$("window").load(function() {
$("body").removeClass("preload");
});
至于禁用 javascript 的浏览器：
<noscript>
<style>
.preloader {display: block;}
</style>
</noscript>
【讨论】：
我猜你陷入了 FOUC（无样式内容的 Flash）
克服这个问题的典型方法是将包含您的表格的 div 设置为
可见性：隐藏；虽然 dom 仍在浏览器中进行处理，但完成后
文档准备好你取消隐藏你的 div 回来
$('#customtabs').css('visibility','visible');
你可以看到这个example
【讨论】：