{% extends "base.html" %} {% load staticfiles %} {% load bootstrap3 %} {% block extrahead %} {{ block.super }} <!-- DataTables CSS --> <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}" rel="stylesheet"> <!-- DataTables Responsive CSS --> <link href="{% static "bower_components/datatables-responsive/css/dataTables.responsive.css" %}" rel="stylesheet"> {% endblock extrahead %} {% block content %} <div class="row"> <div class="panel-body"> <div class="dataTables_wrapper"> <table class="table table-striped table-bordered table-hover" id="table" cellspacing="0" width="100%"> {% include "booking/booking_table.html" %} </table> </div> <!-- /.table-responsive --> <!-- /.panel-body --> <!-- /.panel --> </div> <!-- /.col-lg-12 --> </div> {% endblock content %} {% block extrajs %} <!-- DataTables JavaScript --> <link href="{% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" %}" rel="stylesheet"> <script src={% static "bower_components/datatables/media/js/jquery.dataTables.min.js" %}></script> <script src={% static "bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js" %}></script> <script type="text/javascript"> $(document).ready(function () { $('#table').DataTable({ scrollX: true, }); }); </script> {% endblock extrajs %}