src/templates/base/booking/booking_list.html

   1 {% extends "base.html" %}
   2 {% load staticfiles %}
   3 {% load bootstrap4 %}
   4
   5 {% block extrahead %}
   6     {{ block.super }}
   7     <!-- DataTables CSS -->
   8     <link href="{% static "node_modules/datatables.net-bs4/css/dataTables.bootstrap4.min.css" %}"
   9           rel="stylesheet">
  10
  11     <!-- DataTables Responsive CSS -->
  12     <link href="{% static "node_modules/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css" %}"
  13           rel="stylesheet">
  14 {% endblock extrahead %}
  15
  16 {% block content %}
  17     <div class="row">
  18         <div class="col">
  19             <div class="panel-body">
  20                 <div class="dataTables_wrapper">
  21                     <table class="table table-striped table-bordered table-hover" id="table"
  22                             cellspacing="0"
  23                             width="100%">
  24                         {% include "booking/booking_table.html" %}
  25                     </table>
  26                 </div>
  27             </div>
  28         </div>
  29     </div>
  30 {% endblock content %}
  31
  32 {% block extrajs %}
  33     <!-- DataTables JavaScript -->
  34     <script src={% static "node_modules/datatables.net/js/jquery.dataTables.min.js" %}></script>
  35     <script src={% static "node_modules/datatables.net-bs4/js/dataTables.bootstrap4.min.js" %}></script>
  36
  37     <script type="text/javascript">
  38         $(document).ready(function () {
  39             $('#table').DataTable({
  40         scrollX: true,
  41         });
  42         });
  43     </script>
  44 {% endblock extrajs %}