How to Paginate an Array in JavaScript? Last Updated : 07 May, 2024 Comments Improve Suggest changes Like Article Like Report Pagination is a common requirement in web applications especially when dealing with large datasets. It involves dividing a dataset into smaller manageable chunks or pages. In JavaScript, we can paginate an array by splitting it into smaller arrays each representing a page of the data. Below are the approaches to paginate an Array in JavaScript: Table of Content Using array.slice()Using array.splice()Using array.slice()This approach uses the array.slice() method to divide the array into smaller chunks.It takes two parameters: start and end indicating the start and end indices of the slice.By calculating the appropriate start and end indices based on desired page size and current page number we can extract the data for the current page.Example: Below is an code example of paginating an array in JavaScript using array.slice() method. JavaScript function GFG(array, currentPage, pageSize) { const startIndex = (currentPage - 1) * pageSize; const endIndex = startIndex + pageSize; return array.slice(startIndex, endIndex); } const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const currentPage = 2; const pageSize = 3; const currentPageData = GFG(data, currentPage, pageSize); console.log(currentPageData); Output: [ 4, 5, 6 ]Using array.splice()This approach utilizes the array.splice() method to the extract elements from the array.Similar to the first approach we calculate the start and end indices based on current page and page size.Instead of the returning a new array like slice(), splice() modifies the original array in the place. Therefore, we need to the make a copy of the array before paginating to the avoid altering the original data.Example: Below is an code example of paginating an array in JavaScript using array.splice() method. JavaScript function GFG(array, currentPage, pageSize) { const startIndex = (currentPage - 1) * pageSize; const endIndex = startIndex + pageSize; return array.splice(startIndex, pageSize); } const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const currentPage = 3; const pageSize = 4; const currentPageData = GFG(data, currentPage, pageSize); console.log(currentPageData); Output: [ 9, 10 ] Comment More infoAdvertise with us Next Article How to Paginate an Array in JavaScript? M mguru4c05q Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to Loop Through an Array in JavaScript? Here are the various ways to loop through an array in JavaScript1. Using for LoopThe for loop is one of the most used ways to iterate over an array. It gives you complete control over the loop, including access to the array index, which can be useful when you need to modify elements or perform other 4 min read How to Find the Length of an Array in JavaScript ? JavaScript provides us with several approaches to count the elements within an array. The length of an array lets the developer know whether an element is present in an array or not which helps to manipulate or iterate through each element of the array to perform some operation. Table of Content Usi 3 min read Split an Array into Chunks in JavaScript Here are different methods to split an array into chunks in JavaScript.1. Using slice() MethodThe array slice() method returns a new array containing the selected elements. This method selects the elements starting from the given start argument and ends at, but excluding the given end argument. Synt 3 min read How to create HTML List from JavaScript Array? Creating an HTML list from a JavaScript array allows you to dynamically generate <ul> (unordered) or <ol> (ordered) lists and fill them with data directly from your array. This is useful when you want to display array data in a structured way on your webpage. In this guide, weâll go thro 3 min read Create an array filled with given values Using JavaScript In JavaScript, an array is a collection of values that can be stored and accessed in a single variable. Each value in an array is called an element, and elements can be of any data type, such as numbers, strings, or other objects. Arrays are indexed, meaning that each element has a numerical positio 5 min read Like