Question

我正在使用数据表并将数据从数据库收集到数组然后显示在屏幕上。这一切都很好。

如果数据大约是2000行和7列，那么它只需要几秒钟，但是如果它是10,000行和7列，它可能需要大约30到40秒，所以我想添加一个覆盖灰色的覆盖屏幕并显示“正在载入......请等待”

我尝试过在本网站和网上找到的各种脚本和代码，但似乎都没有。我经常得到延迟，然后是叠加的闪光，然后就消失了。

任何人都可以帮忙吗？

这是我正在使用的数据表代码：

更新：这是没有数据库查询的页面。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>TEST</title>
<style type="text/css">
    @import "layout_page.css";
    @import "layout_table.css";
    html { overflow-y: scroll; };
</style>
<link href="layout.css" rel="stylesheet" type="text/css">
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery.dataTables.min.js" type="text/javascript"></script>
<script src="jquery.jeditable.js" type="text/javascript"></script>
<script src="jquery.dataTables.editable.js" type="text/javascript"></script>
</head>
<body id="dt_test">
<div id="container"><div id="layout">

<?php

if(!function_exists('json_encode'))
{
    include_once('JSON.php');
    $GLOBALS['JSON_OBJECT'] = new Services_JSON();
    function json_encode($value)
    { return $GLOBALS['JSON_OBJECT']->encode($value); }

    function json_decode($value)
    { return $GLOBALS['JSON_OBJECT']->decode($value); }
}


//
// DB QUERIES
??
    $result = json_encode($data);
?>

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
    $('#example').dataTable( {
        "aaData": <?php echo $result ?>,
        "aoColumns": [
            { "sTitle": "Order" },
            { "sTitle": "Name" },
            { "sTitle": "Rank" },
            { "sTitle": "Number", "sClass": "center" },
            { "sTitle": "Locale", "sClass": "center" },
        { "sTitle": "Email", "sClass": "center" },
            { "sTitle": "Description", "sClass": "center" }
            ],
            "bJQueryUI": true,
            "bProcessing": true,
            "bSort": false,
            "bSortClasses": false,
            "bDeferRender": false,
            "sPaginationType": "full_numbers",
            "aLengthMenu": [[10, 25, 50, 100, 250, 500, -1], [10, 25, 50, 100, 250, 500, "All"]],

        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
            var id = "users"+":"+aData[0];
            $(nRow).attr("id",id);
            return nRow;
        }
    } );
    $('#example').dataTable().makeEditable({
            sUpdateURL: "update.php",
    });
} );
</script>

<div class='demo' id='demo' name='demo'></demo></div>

</div></div>
</body>
</html>

如何在其他任何内容之前添加显示的过度...然后删除一个表已准备就绪？

更新使用整个页面减去数据库查询更新了我的原始帖子。我需要Overlay来显示 BEFORE 任何数据库查询发生之前以及数据表开始处理表之前。

由于

Answer 1

您可以这样做：

CSS：

#overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 99999;
    background-color: gray;
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;
    display: none;
}
#overlay h2 {
    position: fixed;
    margin-left: 40%;
    top: 40%;
}

标记：

<div id="overlay"><h2>Loading .. Please wait</h2></div>

当您想要显示消息/覆盖时，例如在dataTable之前：

$("#overlay").show();

完成初始化后，

在dataTable（）中回调：

$('#example').dataTable( {
   ...
   fnInitComplete : function() {
      $("#overlay").hide();
   }
});

Answer 2

长时间运行的JavaScript会冻结浏览器，阻止其更新。为了适应这种情况，您需要在显示叠加层和启动脚本之间添加延迟（甚至是0ms延迟）。使用setTimeout()添加此延迟：

$("#overlay").show();
setTimeout(function () {
    // initialize dataTable here
}, 0);

在具体情况下，看起来您在页面加载时立即初始化dataTable。是否正确加载页面加载可见，然后在加载数据时隐藏它，并且再也不显示（除非重新加载页面）？在这种情况下，默认情况下只需将页面上的叠加层显示即可。只使用JavaScript来隐藏它。

#overlay {
    display: block;  /* Default visible!! */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.5);
}

    ...
    <div id="overlay"></div>
</body>

// dataTable initialization code here
$("#overlay").hide();

编辑：在实际测试中，我发现Chrome不一致。在大多数情况下，除非在初始化数据表之前至少延迟几毫秒，否则它不会呈现页面。从理论上讲，0ms的延迟应该足够了，但在实践中，情况似乎并非如此。

http://jsfiddle.net/DgSuJ/

Answer 3

我在线为我提供了一个非常简单的解决方案，它的工作方式非常出色。您也可以尝试使用此解决方案：

在datatable的初始化中，使用以下代码：

$(document).ready(function() { $('#example').dataTable({ "order": [[ 0, 'asc' ]] }); $('#example').show(); } );

在您的HTML代码中，最初将表格隐藏为display:none。使用方式如下：

<table id="example" cellspacing="0" width="100%" style="display:none">

使用DataTable加载Overlay

3 个答案: