<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <h1>Instructors</h1> <div class="row"> <div class="col-sm-10"> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>User Name</th> <th>Display Name</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> </thead> <tfoot> <tr> <th>User Name</th> <th>Display Name</th> <th>First Name</th> <th>Last Name</th> <th>Email</th> </tr> </tfoot> <tbody> <tr> <td>mikec</td> <td>Mike Clark</td> <td>Mike</td> <td>Clark</td> <td>myemail@gmail.com</td> </tr> <tr> <td>ccc</td> <td>Maddie Clark</td> <td>Maddie</td> <td>Clark</td> <td>myemail@gmail.com</td> </tr> </tbody> </table> </div> </div> </div>

@import url('https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css');

/* API method to get paging information */ 'use strict'; var $ = jQuery; $.getScript("https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js", function(){ $('#example').DataTable( { "paging": true, "ordering": true, "info": false } ); });