javascript - ajax 与数据库查询和显示/隐藏表行

Question

我正在为一个项目构建一个简单的网站。我的页面之一执行 MySQL 数据库查询并将所有内容输出到 html 表，然后我使用过滤器启用显示/隐藏某些行。 这种策略在处理数百行时效果很好，但在处理数千行时，人们单击链接时会出现明显的延迟。我想也许我可以添加一些 Ajax，在查询未完成时显示“正在加载/查询”信息。

示例网页:http://epigenome.wustl.edu/TE_Methylation/browse.php

当人们访问该链接时，在数据库完成查询之前，我想显示“正在加载”消息，并且当人们选择隐藏几行时，在Javascript完成隐藏相应的行之前，也显示“正在加载”消息信息。 (上面的示例页面没有这个问题，因为只有 900 行，而我正在处理具有 10000 多行的数据集)

有人对如何实现这一目标有一些建议吗？非常感谢:)

Answer 1

处理大量数据时，您希望在将数据发送到客户端之前尝试过滤尽可能多的数据。想象一下您的查看者使用移动设备或连接速度有限。此数据的传输时间会更长。

在你的例子中，我会做的是设置一个ajax服务，它响应给定过滤器/条件的结果的json列表。然后，我会将响应限制为评论中所述的页面或范围。

因此，使用通过 Ajax 请求提供的参数来过滤 MySQL 查询中的结果。

例如(加载更多示例)

var dataService = function() {
    this.Loaded = 0,
    this.Limit = 20,
    this.LoadMore = function() {
        $.getJSON("data_service.php", { FilterH1ES : true, Blah : true, Start : this.Loaded, Limit : this.Limit }, function(results) {
            // Append Rows to table
            // ...
        }
    }
}

// OnLoad call dataService.LoadMore();

然后在 PHP 中，您将根据参数对 MySQL 进行查询过滤。

<?php
    $filters['H1ES'] = $_GET['FilterH1ES'];
    $sql = "SELECT * FROM MyTable WHERE /* Default Filter Here */";

    if ($filters['H1ES']) $sql .= " H1ES Filter";

    // ... run query and json_encode(result);

代码未经测试，我的 JavaScript 很生锈。