자바 스크립트에서 배열에 대한 페이지 매김과 같은 동작을 만드는 방법

Question

내 응용 프로그램을 가져온 후 내 응용 프로그램에서 페이스 북에서 승인했습니다. 모든 친구 정보가 배열로 반환됩니다.

내가 생일 현재 날짜에 가장 가까운 친구의 순서로이 배열을 정렬

. (이것에 대한 표시하지 코드)

나는 일부 사용자가있을 수 있으므로 한 번에 20 친구에 대한 정보를 표시 할 수백 명의 친구.

현재 한 번에 모든 친구를 페이지에 올려 놓습니다. 여기

내가 전체 배열을 통해 루프에 사용 된 코드 등 몇 가지 지침을 부탁드립니다 나는 멍청한 놈 페이지

$.each(json.data,function(i,fb){ 

        var pic_url = "http://graph.facebook.com/"+fb.id+"/picture"; 
        json_details = {name: fb.name, provider_user_id: fb.id, birthday: fb.birthday, provider_name : 'Facebook' }; 
        var celebrant_details = escape(JSON.stringify(json_details)); 
        html += "<form id='new_celebration"+fb.id+"' method='post' action='/celebrations' accept-charset='UTF-8'>"; 
        html += "<input type='hidden' id='friend' value='"+celebrant_details +"' name='celebrant_details' />" 
        html += "<input type='hidden' id='manager' value='"+manager_details +"' name='manager_details' />" 

        html += "<li>" + fb.name + "</li>"; 
        if(fb.birthday != null){ html += "<li>" + fb.birthday + "</li>"; } //don't show if don't have a birthday 
        html += "<li><img src="+pic_url+" /></li>";  
        html += "<input class='button-mini-subtle submit' type='submit' value='select' alt='select' >";  
        html += "</form>"; 

       });//.each loop 

에 정보를 넣어.

배열에서 더 많은 사용자를 표시하기 위해 클릭 할 수있는 버튼을 사용자에게 제공하려고합니다. 그래서 어떤 종류의 함수 호출을 만들어야한다는 것을 알았고 배열에있는 위치를 알아야합니다.

어떻게 이런 종류의 동작을 얻을 수 있습니까?

Answer 1

index 변수를 사용하여 배열의 현재 색인을 보유하거나 색인을 jQuery .data()으로 저장할 수 있습니다. 그런 다음 Array.slice()을 사용하여 하위 배열을 가져올 수 있습니다.

다음은 .data()을 사용한 단순화 된 예입니다. 데이터 구조와 필요한 HTML 출력에 맞춰야합니다.

// display our initial list 
displayNext(); 

$("#next").click(function() { 
    // display next elements 
    displayNext(); 
}); 

function displayNext() { 
    // get the list element 
    var list = $('#list'); 

    // get index stored as a data on the list, if it doesn't exist then assign 0 
    var index = list.data('index') % arr.length || 0; 

    // save next index - for next call 
    list.data('index', index + 20); 

    // 1) get 20 elements from array - starting from index, using Array.slice() 
    // 2) map them to array of li strings 
    // 3) join the array into a single string and set it as a HTML content of list 
    list.html($.map(arr.slice(index, index + 20), function(val) { 
    return '<li id=' + val.id + '>' + val.name + '</li>'; 
    }).join('')); 
} 

HERE

는 코드입니다.