I'm having a problem with paging, I'm fetching data from a json, it loads them correctly, the problem is when I draw these elements and move through the pagination between the different numbers it repeats the elements again
CODE:
$("#list-tab").pagination({
// you call the plugin
dataSource: data.value, // pass all the data
pageSize: 5, // put how many items per page you want
callback: function (data, pagination) {
// data will be chunk of your data (json.Product) per page
// that you need to display
var i = 0;
$.each(data, function (i, f) {
if(f.isRead){
if(f.subject.trim() == ''){
f.subject = f.sender.emailAddress.address ;
}
const listItem = document.createElement("a");
listItem.setAttribute(
"class",
"list-group-item list-group-item-action"
);
listItem.setAttribute("id", "list" + i + "list");
listItem.setAttribute("data-toggle", "list");
listItem.setAttribute("href", "#list" + i);
listItem.setAttribute("role", "tab");
listItem.setAttribute("aria-controls", i);
listItem.innerHTML = f.subject;
tabList.appendChild(listItem);
const contentItem = document.createElement("div");
contentItem.setAttribute("class", "tab-pane");
contentItem.setAttribute("id", "list" + i);
contentItem.setAttribute("role", "tabpanel");
contentItem.setAttribute("aria-labelledby", "list" + i + "list");
contentItem.innerHTML =
"<strong> from: " +
f.from.emailAddress.address +
"</strong><br><br>" +
"<br>"+
f.bodyPreview +
"..."+ "<button class='btn btn-primary' onclick='openSwal()'>" +
"Responder</button>";
tabContent.appendChild(contentItem);
i++;
}
});