Using KnockoutJs in SharePoint 2013

</script>

</table>

<script type="text/javascript">

function ProductModal() {

var self = this;

self.pageNumber = ko.observable(0);

self.nbPerPage = 2;

self.Products = ko.observableArray([]);

$.getJSON(_spPageContextInfo.webAbsoluteUrl + "/_vti_bin/listdata.svc/ProductList", function (data) {

if (data.d.results) {

self.Products(ko.toJS(data.d.results));

}

});

self.totalPages = ko.computed(function () {

var div = Math.floor(self.Products().length / self.nbPerPage);

div += self.Products().length % self.nbPerPage > 0 ? 1 : 0;

return div - 1;

});

self.next = function () {

if (self.pageNumber() < self.totalPages()) {

self.pageNumber(self.pageNumber() + 1);

}

}

self.previous = function () {

if (self.pageNumber() != 0) {

self.pageNumber(self.pageNumber() - 1);

}

}

self.currentPage = ko.computed(function () {

var startPageIndex = self.pageNumber();

var endPageIndex = self.pageNumber() + self.nbPerPage;

return self.Products().slice(startPageIndex, endPageIndex);

});

}

ko.applyBindings(new ProductModal());

</script>

Click on "Insert and Stop Editing". If all goes well then you will see the results as shown in the first screenshot.

The following are a few things to note:

1. $.getJSON(_spPageContextInfo.webAbsoluteUrl + "/_vti_bin/listdata.svc/ProductList"
   is the main data returning element. Change to your list name and you can add filters at the JSON request to get specific records.
   
2. Pagination is controlled in the following:
   

   self.currentPage = ko.computed(function () {

   var startPageIndex = self.pageNumber();

   var endPageIndex = self.pageNumber() + self.nbPerPage;

   return self.Products().slice(startPageIndex ,endPageIndex );
   

3. For image data binding use spSrc (the kosp library handles this)

This program can be extended for many other visual effects and for checking boundary conditions. This is one of the powerful ways to write a UI without requiring server-side coding and without Visual Studio and SharePoint Designer.