JavaScript - JSON으로 페이지 매기기

Question

그래서 자바 스크립트로 페이지 매김을 만들었습니다. 먼저 JSON 데이터를 파일에서 가져 와서 배열에 저장합니다. 그런 다음 항목을 페이지에 렌더링합니다. 이전 및 다음 페이지 버튼을 추가했지만, 다음 페이지를 클릭하면 모든 항목이 있고 새 항목을 추가하는 div을 지우는 것처럼 작동합니다. 그러나 제 질문은 같습니다. 어떻게 다르게 할 수 있습니까? div를 지우지 않을 것입니다. 왜냐하면 이미 항목을 선택하고 div가 지워지면 그 항목은 unchosen이 될 것이기 때문입니다. 여기

은 JSON의 자바 스크립트입니다 :

$.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(); 
}); 

렌더링 기능

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>"); 
    }); 
} 

다음 & 이전 페이지

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)); 
}); 
} 

항목 선택 스크립트

$("#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

항목을 선택하고 페이지 매기기를 반복했다가 다시 선택하면 선택이 사라집니다.

그렇다면 자바 스크립트 변수에 선택 항목을 저장하는 것이 좋습니다.

$.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(); 
}); 

는

당신의 renderItems에서 다음

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(); 
}); 

, 내가하는 것을 잊지 마세요

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(); 
    } 
} 

할 것

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>"); 
    }); 
} 

그런 다음 클릭에 ID를 저장 DOM

에 ID를 추가 두 함수의 도달 범위에 savedSelection 배치 .