Question

我终于实现了更多加载按钮，并使用ajax在我的页面上加载更多数据，下面的代码效果很好。

但是，由于它是一个活动源，它总是被更新，因此开始和偏移总是不准确。

E.g。

页面加载表由

组成

第8项
第7项
第6项
第5项
第4项
第3项
第2项
第1项

随着时间的推移，我点击加载更多按钮5个帖子因为新活动而可能会变成这样

第10项
第9项
第8项
第7项
第6项
第5项
第4项
第3项
第2项
第1项

使用偏移5和限制5的上述逻辑，当没有更新时，我将得到

第3项，第2项，第1项

但是因为有更新，我最终得到了第5项和第4项的重复显示，因为现在偏移对于mysql表中的新数据来说是错误的。

项目项目5（已显示），项目4（已显示），项目3，项目2项目1

问题：我认为这可能是活动Feed的常见问题。任何帮助表示赞赏

$(document).ready(function() {
        var a = 5;  /*5 items already loaded on page load, so my start count will be 5*/
        $("#showMoreActivity").on("click", function(b) {
            b.preventDefault(), $.ajax({
                url: "/activty/",
                type: "POST",
                dataType: "JSON",
                data: {
                    start: a
                },
                success: function(data) {
if (data.length == 0) {
                        $("#showMoreActivity").addClass("disabled");
                        $("#showMoreActivity").html("End of Activity List");
                    } else {
                        a += 5;
            $("#activity-feed").append(data);

                      }

                }
            });
        });
});

在PHP端我有类似以下内容（简化/修改）

public function getAgentActivity($start = 0, $limit = 5) {
$query = $this->db->prepare('SELECT  * from activity WHERE ORDER BY created DESC LIMIT :limit OFFSET :offset');

if ($result = $query->execute(array(
            ':limit' => $limit,
            ':offset' => $start
        ))) {
//query success, fetch data and do something
}
}

Answer 1

为此，您可以使用基于光标的分页。例如，不使用限制和偏移，而是使用记录的创建时间进行分页。在每个请求上发送最后一个记录创建时间并相应地发送响应。要使此方法起作用，您的记录必须按创建时间排序，创建时间字段应该是唯一的。您也可以使用自动增量主键。

详细信息See here

Answer 2

以下代码可能有所帮助：

success: function(data) {
    a += data.length;

    if (data.length > 0) {
        $("#activity-feed").append(data);
    }

    if (data.length < 5) {
        $("#showMoreActivity").addClass("disabled");
        $("#showMoreActivity").html("End of Activity List");
    }
}

Ajax php / mysql在非常活跃的Feed

2 个答案: