如何在javascript中为数组创建类似行为的分页

在我的应用程序获得我的应用程序获得Facebook授权后，我得到他们所有的朋友信息，这些信息以数组forms返回。

我按照生日最接近当前日期的朋友的顺序对此数组进行排序。（代码未显示）

我想一次显示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 += "
"; html += "" html += "" html += "
" + fb.name + "
"; if(fb.birthday != null){ html += "
" + fb.birthday + "
"; } //don't show if don't have a birthday html += "
"; html += ""; html += "
"; });//.each loop 

我是NOOB，所以会很感激一些指导。

我想给用户一个按钮，他们可以单击以显示arrays中的更多用户。 所以我知道我需要创建一些函数调用，我需要知道我在数组中的位置。

我怎么能得到这种行为？

Answer 1

您可以使用一个额外的index变量来保存数组中的当前索引，或者将索引存储为jQuery .data() 。 然后，您可以使用Array.slice()来获取子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 '
' + val.name + '
'; }).join('')); } 

这是代码。

Answer 2

答案来源： W3Schools和JSBin和Kubetz Sol

     
Array Based Pagination
 First Previous Next Last 
 
 
 
 
    

我的上述代码演示@ W3Schools