Question

我有一个包含大量表的页面，这些表是使用SQL查找创建的。显然，所有这些都需要时间加载，每个表（<div>)默认为“最小化”（我使用javascript来隐藏它直到单击一个按钮）。但这些表仍然在后台呈现。我真的想要一种方法来阻止所有div的内容，直到调用。我尝试使用php if循环，但是页面需要刷新，所以给了那个。

有什么想法吗？我现在一直在寻找年龄。

Answer 1

我同意安德烈的观点。如果您的页面总是加载这些表，那么构建整个页面总是需要永远，隐藏表将无法增加您的处理时间。你需要做的是使用一个AJAX请求，在需要时返回你的表，然后在返回时填充你的div。

Answer 2

我会使用jQuery load方法。

基本示例：

$(document).ready(function() {
    $(".data").each(function(index) {
        var tableName = this.id;
        window.setTimeout(function() {
            LoadData(tableName);
        }, index * 1500);
    });
});

function LoadData(tableName) {
    var url = "load.php?table=" + tableName;
    var oDiv = $("#" + tableName);
    oDiv.html(url + " - To load real data, have here such code: <b>oDiv.load(url);</b><br />Good luck! :)");
}

这附带了这样的HTML：

<div class="data" id="cats_table"></div>
<div class="data" id="dogs_table"></div>
<div class="data" id="flowers_table"></div>

实时测试案例：http://jsfiddle.net/4H8Fa/

Answer 3

正如上面的评论所说，这听起来像你正在寻找的需要AJAX。看看这个Jquery库：

http://www.datatables.net/

更新（根据OP的评论）：

由于您有自定义解决方案，因此不会出现与您所写内容完全一致的“配方”。通常，您应该使用带有getJSON等库的AJAX来回调服务器。然后通过构建TR / TD DOM对象并将它们附加到表对象来填充表。

Answer 4

我是使用$ .ajax和load（）

完成的

<html>
<body>

<div id="load-div" class="functions">
<span>Load</span>
<input type="submit" value="Go" id="load_basic" />
</div>

<div id="result"  class="functions">

</div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $.ajaxSetup ({
        cache: false
    });
    var ajax_load = "<img class='loading' src='img/load.gif' alt='loading...' />";

//  load() functions
    var loadUrl = "page1.html";
    $("#load_basic").click(function(){
        $("#result").html(ajax_load).load(loadUrl);
    });


</script>
</body>
</html>

使用javascript渲染DIV

4 个答案: