Last active
March 6, 2018 07:14
-
-
Save abrudtkuhl/d381cd0b0a3fa411ad46 to your computer and use it in GitHub Desktop.
Simple KnockoutJS paging with DataTables
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Demo: https://abrudtkuhl.github.io/Simple-Knockout-Js-Paging-Datatables/