Ajax php/mysql Load More Button on Very Active feed - php

Question

I have finally implemented the load more button and load more data on my page using ajax and the below code works wonderful.
However, since it's an activity feed, it's always being updated, so the start and offset is always inaccurate.
E.g.
On Page Load Table consist of
Item 8
Item 7
Item 6
Item 5
Item 4
Item 3
Item 2
Item 1
By time I click on load more button for 5 more post it could have became like this because of new activities
Item 10
Item 9
Item 8
Item 7
Item 6
Item 5
Item 4
Item 3
Item 2
Item 1
Using above logic of offset 5 and limit 5, when there's no update I will get
Item 3, Item 2, Item 1
But because there's update, I ended up with duplicates display of Item 5 and Item 4 since the offset is now wrong new to new data in the mysql table.
Item Item 5(already displayed), Item 4(already Displayed), item 3, item 2 item 1
Question: I think this could be a common problem for activity feed. Any help is appreciated
$(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);
}
}
});
});
});
on PHP end I have something like the following (simplified/modified)
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

For this you could use cursor based pagination. For e.g., instead of using limit and offset, use creation time of the record to paginate.
On each request send the last record creation time and send response accordingly. For this approach to work, your record must be sorted on creation time and creation time field should be unique. You could use auto-increment primary key as well.
For more detail See here

Answer 2

Below code may help:
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");
}
}