在我的应用程序获得我的应用程序Facebook授权后，我得到他们所有的朋友信息，这是以数组形式返回的。
我按照生日最接近当前日期的朋友的顺序对此数组进行排序。（代码未显示）
我想一次显示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
我是NOOB，所以会很感激一些指导。
我想给用户一个按钮，他们可以单击以显示阵列中的更多用户。所以我知道我需要创建一些函数调用，我需要知道我在数组中的位置。
我怎么能得到这种行为？
您可以使用额外的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是代码。
答案来源：W3Schools和JSBin以及Kubetz Sol
<!DOCTYPE html>
<html>
<body>
<p>Array Based Pagination</p>
<button onclick="First()">First</button>
<button onclick="Previous()">Previous</button>
<button onclick="Next()">Next</button>
<button onclick="Last()">Last</button>
<p id="demo"></p>
<br />
<p id="page"></p>
<br />
<p id="info"></p>
<script>
var arr = [];
var currentPage = 1;
var pageSize = 5;
var skip = 0;
var totalCount = 0;
var totalPage = 0;
for (var i = 1; i <= 100; i++) {
arr.push(i);
}
myFunction();
function First() {
currentPage = 1;
skip = 0;
myFunction();
}
function Next() {
if (currentPage < totalPage) currentPage++;
skip = pageSize * (currentPage - 1);
myFunction();
}
function Previous() {
if (currentPage > 1) currentPage--;
skip = pageSize * (currentPage - 1);
myFunction();
}
function Last() {
currentPage = totalPage;
skip = pageSize * (currentPage - 1);
myFunction();
}
function myFunction() {
totalCount = arr.length;
totalPage = Math.ceil(totalCount / pageSize);
var citrus = arr.slice(skip, skip + pageSize);
document.getElementById("info").innerHTML = "skip: " + skip + ", CP: " + currentPage + ", pageSize: " + pageSize;
document.getElementById("demo").innerHTML = citrus;
document.getElementById("page").innerHTML = "Page Info: " + currentPage + "/" + totalPage;
}
</script>
</body>
</html>
我的上面的代码演示@ W3Schools