php – 使用DataTables加载Overlay

2023年9月10日 224次阅读

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

如果数据大约是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在任何数据库查询发生之前和数据表开始处理表之前显示.

谢谢

最佳答案 你可以这样做：

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();
   }
});
点赞