Easy KnockoutJS Pagination with Data Tables

Data Tables makes it super easy to add pagination, searching, and sorting to tabular data bound with KnockoutJS

TL;DR: DataTables provides simple pagination, sorting, and searching capabilties to tabular data bound with KnockoutJS - DEMO

So I was working on a WordPress plugin that pulled data from a SQL Server database via ASP.Net Web API and was using KnockoutJS to make the binding super easy. This worked great and was surprisingly simple to accomplish. However some of the data that was coming back was over 1,000 rows. This obviously didn't look great to the users and was not really practical nor usable. So I started down the path of handling paging at the API level and passing the page as a parameter... Yada Yada Yada you've been there.

But then I found DataTables ... an excellent table plugin for jQuery.

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

Hey I need that! DataTables provides extremely simple pagination, searching, sorting and more functionality to any HTML table. So in order to get this to work you can use the declarative foreach feature of Knockout to build out your table with the JSON data coming back from your API. Enough of the boring stuff, here's the code..

View the code on GitHub

And here's the demo in action using JSON data from the Donor's Choose API.