带有数据库查询和显示/隐藏表行的 ajax答案

【问题标题】：ajax with database query and show/hide table rows带有数据库查询和显示/隐藏表行的 ajax
【发布时间】：2014-06-04 22:50:26
【问题描述】：

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

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

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

是否有人对如何实现这一目标提出了一些建议？非常感谢:)

【问题讨论】：

为什么不加分页呢？
感谢您建议分页。我只是觉得可能需要为这个功能添加很多代码。延迟就像 3-4 秒，所以有点不想实现。再次感谢。
除了分页，我推荐Google visualization table。我已经在与您类似的项目中使用过它。它带有排序、过滤等功能，并且很容易实现。
非常感谢您的建议。会试试的。

标签： javascript php jquery mysql sql

【解决方案1】：

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

在您的情况下，我会做的是设置一个 ajax 服务，该服务以给定过滤器/标准的结果的 json 列表进行响应。然后，我会将响应限制在 cmets 中所述的页面或范围内。

因此，使用通过 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 生锈了。

【讨论】：

感谢您的回答。