All geek questions in one place

How to create pagination as behavior for an array in javascript

In my application, after receiving my Facebook Authorized application, I receive all the information of my friends, which is returned in an array.

I sort this array in order of friends whose birthday is close to the current date (code not shown for this)

I want to display information for 20 friends at a time, as some users may have hundreds of friends.

Currently, I put all my friends on the page at a time.

Here is the code I used to iterate over the entire array and put the information on the page

$.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

I am NOOB, so I would appreciate some recommendations.

I want to give users a button that they can click to display more users from the array. So I know that I need to create some kind of function call, and I need to know where I am in the array.

How can I get this behavior?

+5
source share
2 answers

You can use an optional index variable that will contain the current index in your array or have an index stored as jQuery .data() . Then you can use Array.slice() to get the subarray.

Here is a simplified example using .data() . You have to adapt it to your data structure and the requirement of HTML output - this is not your question :).

 // 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 is the code.

+9
source

Answer Source: W3Schools and JSBin and 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>

My Above Code Demo @ W3Schools

0
source

Source: https://habr.com/ru/post/1386491/

More articles:


All Articles