<!DOCTYPE html> <html> <head> {% include "common/common-head.html" %} </head> <body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper"> {% include "common/page-header.html" %} {% with pageselected="boards" %} {% include "common/sidebar-menu.html" %} {% endwith %} <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> <!-- Content Header (Page header) --> <section class="content-header"> <h1> Boards configuration </h1> </section> <!-- Main content --> <section class="content"> <div class="row"> <div class="col-xs-12"> <div class="box"> <div class="box-header"> <h3 class="box-title">Hover Data Table</h3> </div> <!-- /.box-header --> <div class="box-body"> <table id="example2" class="table table-bordered table-hover"> <thead> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> <th>CSS grade</th> </tr> </thead> <tbody> </tbody> <tfoot> <tr> <th>Rendering engine</th> <th>Browser</th> <th>Platform(s)</th> <th>Engine version</th> <th>CSS grade</th> </tr> </tfoot> </table> </div> <!-- /.box-body --> </div> <!-- /.box --> </div> <!-- /.col --> </div> <!-- /.row --> </section> <!-- /.content --> </div> <!-- /.content-wrapper --> {% include "common/footer.html" %} </div> <!-- ./wrapper --> {% include "common/common-js.html" %} <!-- DataTables --> <script src="../../bower_components/datatables.net/js/jquery.dataTables.min.js"></script> <script src="../../bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script> <script> $(function () { $('#example2').DataTable({ 'paging' : true, 'lengthChange': true, 'searching' : true, 'ordering' : true, 'info' : true, 'autoWidth' : true }) }) </script> </body> </html>