Easy KnockoutJS Pagination with Data Tables
October 2, 2014
developmentData 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..
And here's the demo in action using JSON data from the Donor's Choose API.
Active Projects
Here are some of the projects I am currently working on. Some are side projects, some are client projects, and some are just for fun. I like to build things and I like to share what I learn along the way. If you have any questions about any of these projects, feel free to reach out.
📦 Flow Export
Export Salesforce Flow to Miro to collaborate with your team. Read more about the launch of Flow Export on the Salesforce AppExchange.
🤖 Make Storytime
Personalized children's stories generated by AI. This is an app I am building with my kids.
📠 Fax Online
Yea, I know. But there is a long tail for everything and believe it or not there was an underserved market for people that need to send a fax online. Some people (like me!) just need to send a one time fax.
Read more about this micro Saas project in a blog post about building an online fax service.
📱 Cloud Number
Cloud Number is a virtual phone app that helps you protect your privacy online. Use it to receive SMS online and keep your phone number private. It's also a great service for a freelancer or entrepreneur that wants to have a separate phone for their business for SMS and voicemail.
🥑 Free URL Indexer
Free URL Indexer is a free tool to help you index your backlinks and get them into Google faster. It's a simple tool that I built to help me with my own SEO efforts and I decided to share it with the world. It's a free tool and I don't even ask for your email address. Just paste in your URL and click the button.
👉 See all projects