JavaScript - Paginierung mit JSON

Question

So habe ich eine Art Seitenumbruch mit Javascript gemacht. Zuerst werden JSON-Daten aus der Datei abgerufen und in ein Array eingefügt. Dann werden Elemente auf der Seite gerendert. Ich habe dort die Schaltflächen Vorherige und Nächste Seite hinzugefügt, aber im Moment funktioniert es so, als ob Sie auf die nächste Seite klicken, es löscht nur die div wo alle Elemente sind und fügt neue hinzu, aber meine Frage ist. Wie könnte ich es anders machen, also würde es das Div nicht löschen, denn wenn ich den Artikel bereits gewählt habe und div wird gelöscht, dann wird der Artikel unchosen sein.

Hier JSON javascript:

$.getJSON("/Search.php", function(itemsList){ 
    if(itemsList.items){ 
     for(var i = 0;i < itemsList.items.length; i++){ 
      pruice = itemsList.items[i].price; 
      prices[itemsList.items[i].name] = pruice; 
      items[i] = { 
       name: itemsList.items[i].name, 
       img: itemsList.items[i].img, 
       price: itemsList.items[i].price, 
       color: itemsList.items[i].color 
      }; 
     } 
    } 
items.sort(function(a, b) {return b.price - a.price;}); 
OnFinished(); 
}); 

Render-Funktion

function OnFinished(){ 
$('#InventoryMe').empty(); 
var perPage = 30; 
function paginate(items, page) { 
    var start = perPage * page; 
    return items.slice(start, start + perPage); 
} 

function renderItems(pageItems){ 
    pageItems.forEach(function(item, index, arr){ 
     $('#InventoryMe').append("<div class='item' style='background-image: url(https://steamcommunity-a.akamaihd.net/economy/image/"+item.img+"/116x116f)'> <span class='nameArea'>"+item.name+"</span><span class='priceArea' style='border: 1px solid #1f1e1e;border-bottom-color:"+item.color+"'>"+item.price+"</span></div>"); 
    }); 
} 

Weiter & Vorherige Seite

var page = 0; 
renderItems(paginate(items, page)); 
$('#nextPage').on('click', function(){ 
    $('#InventoryMe').empty(); 
     page++; 
     renderItems(paginate(items, page)); 
}); 
$('#previousPage').on('click', function(){ 
    $('#InventoryMe').empty(); 
     page--; 
     renderItems(paginate(items, page)); 
}); 
} 

Auswahl Artikel Skript

$("#InventoryMe").on("click", ".item", function() { 
    var calculateP = fee/100; 
    var itemName = $(this).find('.nameArea').text(); 
    var itemPrice = $(this).find('.priceArea').text(); 
    var newPrice = itemPrice * calculateP; 
    var jacobExe = parseInt(newPrice * 100)/100; 
    if($(this).closest(".item").hasClass("item-selected")){ 
     $(this).last().removeClass("item-selected"); 
    } else{ 
     $(this).toggleClass("item-selected"); 
    } 
    calculateTotal(); 
}); 

Answer 1

Ich gehe davon aus, dass Sie ein Element auswählen und weg paginieren und wieder zurück, und die Auswahl ist dann weg.

Wenn das der Fall ist, würde ich die Auswahl in einer Javascript-Variable speichern, vorzugsweise per ID.

$.getJSON("/Search.php", function(itemsList){ 
    if(itemsList.items){ 
     for(var i = 0;i < itemsList.items.length; i++){ 
      pruice = itemsList.items[i].price; 
      prices[itemsList.items[i].name] = pruice; 
      items[i] = { 
       name: itemsList.items[i].name, 
       img: itemsList.items[i].img, 
       price: itemsList.items[i].price, 
       color: itemsList.items[i].color, 
       id: itemsList.items[i].id //add id 
      }; 
     } 
    } 
    items.sort(function(a, b) {return b.price - a.price;}); 
    OnFinished(); 
}); 

hinzufügen ID DOM

function renderItems(pageItems){ 
    pageItems.forEach(function(item, index, arr){ 
     $('#InventoryMe').append("<div data-id='"+item.id+"' class='item' style='background-image: url(https://steamcommunity-a.akamaihd.net/economy/image/"+item.img+"/116x116f)'> <span class='nameArea'>"+item.name+"</span><span class='priceArea' style='border: 1px solid #1f1e1e;border-bottom-color:"+item.color+"'>"+item.price+"</span></div>"); 
    }); 
} 

Dann ID auf Klick speichern

var savedSelection; 
$("#InventoryMe .item").click(function() { 
    savedSelection = $(this).data('id'); 
    var calculateP = fee/100; 
    var itemName = $(this).find('.nameArea').text(); 
    var itemPrice = $(this).find('.priceArea').text(); 
    var newPrice = itemPrice * calculateP; 
    var jacobExe = parseInt(newPrice * 100)/100; 
    if($(this).closest(".item").hasClass("item-selected")){ 
     $(this).last().removeClass("item-selected"); 
    } else{ 
     $(this).toggleClass("item-selected"); 
    } 
    calculateTotal(); 
}); 

Dann in Ihrem renderItems, würde ich

function renderItems(pageItems) { 
    pageItems.forEach(function(item, index, arr) { 
     $('#InventoryMe').append("<div class='item' style='background-image: url(https://steamcommunity-a.akamaihd.net/economy/image/"+item.img+"/116x116f)'> <span class='nameArea'>"+item.name+"</span><span class='priceArea' style='border: 1px solid #1f1e1e;border-bottom-color:"+item.color+"'>"+item.price+"</span></div>"); 
    }); 
    if (savedSelection) { 
     $('[data-id="'+savedSelection+'"]').click(); 
    } 
} 

tun Sie nicht vergessen, placed savedSelection in einem erreichbaren Bereich beider Funktionen .