Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple KnockoutJS paging with DataTables
<!DOCTYPE html>
<html lang="en">
<head>
<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 DataTables.net</title>
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css">
<link rel="stylehseet" type="text/css" href="//cdn.datatables.net/responsive/1.0.1/css/dataTables.responsive.css">
<!-- 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="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<header class="page-header">
<h1>Simple KnockoutJS Paging With Datatables</h1>
</header>
<p class="lead">This demo pulls data from the <a href="http://data.donorschoose.org/" target="_blank">Donors Choose Data API</a> to demonstrate how paging, sorting, and searching works with <a href="http://knockoutjs.com/" target="_blank">KnockoutJS</a> bound data and <a href="http://datatables.net/" target="_blank">DataTables</a>. Read more in <a href="http://brudtkuhl.com/easy-knockoutjs-pagination-data-tables/">blog post</a>.
<header class="page-header">
<h2>Demo <small>Pulling 50 proposals from 50310</small></h2>
</header>
<!-- 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">
<thead>
<tr>
<th>Project</th>
<th>School</th>
<th>% Funded</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: proposals() -->
<tr>
<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>
</tr>
<!-- /ko -->
</tbody>
</table>
<header class="page-header">
<h2>The Code</h2>
</header>
<script src="https://gist.github.com/abrudtkuhl/d381cd0b0a3fa411ad46.js"></script>
<header class="page-header">
<h2>Dependencies</h2>
</header>
<ul>
<li><a href="http://jquery.com">jQuery</a></li>
<li><a href="http://getbootstrap.com">Bootstrap</a></li>
<li><a href="http://knockoutjs.com/">KnockoutJS</a></li>
<li><a href="http://knockoutjs.com/documentation/plugins-mapping.html">KnockoutJS Mapping Plugin</a></li>
<li><a href="http://datatables.net/">DataTables</a></li>
<li><a href="http://datatables.net/manual/styling/bootstrap">DataTables Bootstrap</a></li>
</ul>
<hr />
<footer>
<p class="text-muted text-center">Built by <a href="http://youmetandy.com">Andy Brudtkuhl</a> - <a href="http://brudtkuhl.com/easy-knockoutjs-pagination-data-tables/">Blog Post</a> - <a href="https://github.com/abrudtkuhl/Simple-Knockout-Js-Paging-Datatables">Full Source on Github</a> </p>
</footer>
</div>
<!-- Include ALL THE SCRIPTS -->
<!-- jQuery http://jquery.com -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Bootstrap http://getbootstrap.com -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<!-- KnockoutJS http://knockoutjs.com/ -->
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<!-- KnockoutJS Mapping http://knockoutjs.com/documentation/plugins-mapping.html -->
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<!-- jQuery DataTables http://datatables.net -->
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
<!-- Bootstrap DataTables http://www.datatables.net/manual/styling/bootstrap -->
<script src="//cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<!-- Responsive DataTables http://www.datatables.net/extensions/responsive/ -->
<script src="//cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.js"></script>
<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("http://api.donorschoose.org/common/json_feed.html?zip=50310&APIKey=DONORSCHOOSE&max=50&callback=?", function(data) {
// bind the data
ko.applyBindings(new ViewModel(data));
// apply DataTables magic
$("#proposals").DataTable( { responsive: true } );
});
});
</script>
</body>
</html>
@abrudtkuhl

This comment has been minimized.

@abrudtkuhl

This comment has been minimized.

Copy link
Owner Author

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.