Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Simple KnockoutJS paging with DataTables
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple KnockoutJS Paging With</title>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="//">
<link rel="stylesheet" type="text/css" href="//">
<link rel="stylehseet" type="text/css" href="//">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src=""></script>
<script src=""></script>
<div class="container">
<header class="page-header">
<h1>Simple KnockoutJS Paging With Datatables</h1>
<p class="lead">This demo pulls data from the <a href="" target="_blank">Donors Choose Data API</a> to demonstrate how paging, sorting, and searching works with <a href="" target="_blank">KnockoutJS</a> bound data and <a href="" target="_blank">DataTables</a>. Read more in <a href="">blog post</a>.
<header class="page-header">
<h2>Demo <small>Pulling 50 proposals from 50310</small></h2>
<!-- the table we apply DataTables magic too, data populated with Knockout Foreach iterating over view model -->
<table id="proposals" class="table table-striped table-bordered">
<th>% Funded</th>
<!-- ko foreach: proposals() -->
<td><a data-bind="attr: { href: $data.proposalURL }, html: $data.title" target="_blank"></a></td>
<td><span data-bind="text: $data.schoolName"></span></td>
<td><span data-bind="text: $data.percentFunded"></span></td>
<!-- /ko -->
<header class="page-header">
<h2>The Code</h2>
<script src=""></script>
<header class="page-header">
<li><a href="">jQuery</a></li>
<li><a href="">Bootstrap</a></li>
<li><a href="">KnockoutJS</a></li>
<li><a href="">KnockoutJS Mapping Plugin</a></li>
<li><a href="">DataTables</a></li>
<li><a href="">DataTables Bootstrap</a></li>
<hr />
<p class="text-muted text-center">Built by <a href="">Andy Brudtkuhl</a> - <a href="">Blog Post</a> - <a href="">Full Source on Github</a> </p>
<!-- Include ALL THE SCRIPTS -->
<!-- jQuery -->
<script src=""></script>
<!-- Bootstrap -->
<script src="//"></script>
<!-- KnockoutJS -->
<script src="//"></script>
<!-- KnockoutJS Mapping -->
<script src="//"></script>
<!-- jQuery DataTables -->
<script src="//"></script>
<!-- Bootstrap DataTables -->
<script src="//"></script>
<!-- Responsive DataTables -->
<script src="//"></script>
$(function() {
// knockout view model
function ViewModel(data) {
var self = this;
// knockout mapping JSON data to view model
ko.mapping.fromJS(data, {}, self);
// get data - sample data from Donors Choose API
$.getJSON("", function(data) {
// bind the data
ko.applyBindings(new ViewModel(data));
// apply DataTables magic
$("#proposals").DataTable( { responsive: true } );

This comment has been minimized.


This comment has been minimized.

Copy link
Owner Author

abrudtkuhl commented May 7, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.