---
title: "Retrieve Data from RESTFul API and add Paging in knockout.js"
description: "Retrieve data from RESTful API in knockout.js and add paging to show data pagewise on the webpage."
author: "Ashutosh Patel"
published: 2024-05-31
updated: 2024-05-31
canonical: https://www.mindstick.com/articles/335974/retrieve-data-from-restful-api-and-add-paging-in-knockout-js
category: "knockcout js"
tags: ["javascript", "api(s)", "knockout.js", "paging"]
reading_time: 5 minutes
---
# Retrieve Data from RESTFul API and add Paging in knockout.js
## Add [knockout.js](https://www.mindstick.com/articles/1637/introduction-knockout-js) in HTML
To add Knockout.js to an HTML file, you need to include the Knockout.js [library](https://www.mindstick.com/articles/157275/passed-peoplecert-it-infrastructure-library-itil-4-foundation-exam-today) in your HTML [document](https://answers.mindstick.com/qa/49880/how-to-open-a-pub-document-on-mac-os-x).
## Example:
```html
Knockout.js Example
```
Make sure to [replace](https://answers.mindstick.com/qa/94270/when-should-i-replace-my-timing-belt) `"https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.2/knockout-min.js"` with the appropriate URL if you are [hosting](https://www.mindstick.com/interview/337/advantage-of-hosting-wcf-in-iis) the library yourself or if you are using a different version.
**[Retrieve Data](https://answers.mindstick.com/qa/102391/how-does-a-computer-hard-drive-store-and-retrieve-data) from [RESTful API](https://www.mindstick.com/forum/157904/what-is-a-restful-api-and-how-does-it-differ-from-other-types-of-apis) using knockout.js AJAX**
```javascript
//add jQuery CDN for using AJAX for retrieve data from API
```
```javascript
// Function to fetch data for the current page
self.fetchData = function () {
$.ajax({
url: self.DataUrl(),
method: "GET",
dataType: "json",
success: function (response) {
self.Data(response); // Populate allData array with fetched data
},
error: function (error) {
console.log("error: ", error);
}
});
};
// Initially fetch all data
self.fetchData();
```
## HTML Code for bind API data
```html
```
**knockout.js code for adding [Paging](https://www.mindstick.com/forum/268/full-data-paging-in-data-list-control)**
```javascript
self.currentPage = ko.observable(1);
self.itemsPerPage = ko.observable(10);
// Bind the data to the current page
self.currentPageData = ko.observableArray([]);
// Calculate total pages based on total items and items per page
self.totalPages = ko.observable();
// Function to navigate to the previous page
self.goToPreviousPage = function () {
if (self.currentPage() > 1) {
self.currentPage(self.currentPage() - 1);
}
};
// Function to navigate to the next page
self.goToNextPage = function () {
if (self.currentPage() < self.totalPages()) {
self.currentPage(self.currentPage() + 1);
}
};
// Function to navigate to a specific page
self.goToPage = function (pageNumber) {
self.currentPage(pageNumber);
};
// Watch for changes in currentPage and fetch data accordingly
self.currentPage.subscribe(function () {
var startIndex = (self.currentPage() - 1) * self.itemsPerPage();
var endIndex = startIndex + self.itemsPerPage();
self.currentPageData(self.Data().slice(startIndex, endIndex));
});self.currentPage.subscribe(function () { var startIndex = (self.currentPage() - 1) * self.itemsPerPage(); var endIndex = startIndex + self.itemsPerPage(); self.currentPageData(self.Data().slice(startIndex, endIndex)); });
```
## HTML Code for add paging on the webpage
```html
```
## Finally, bind all the knockout.js code to the webpage using the below code
```javascript
$(document).ready(function () {
ko.applyBindings(new AppViewModel());
});
```
## Here is the complete code of the above samples
## HTML Code
```html
Fetch data from RESTful API