make Tables 'liste agents' and 'liste projets' sortable, searchable and exportable

Anais Amato · hitier
1 parent b3cb00e4
Showing 3 changed files with 39 additions and 3 deletions Show diff stats
app/main/static/js/style_tables.js
app/main/templates/agents.html
app/main/templates/projects.html
@@ -9,3 +9,15 @@ $(&#39;#charge_table&#39;).DataTable({
         'csvHtml5',
     ]
 });
+
+$('#table_datatables').DataTable({
+    "paginate": false,
+    "searching": true,
+    "ordering": true,
+    "info": false,
+    "dom": 'Bfrtip',
+    buttons: [
+        'excelHtml5',
+        'csvHtml5',
+    ]
+});
 {% extends "base_page.html" %}
+
+
+{% block more_heads %}
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css"/>
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css"/>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='lib/datatables-1.10.24/css/datatables.min.css') }}"/>
+{% endblock %}
+
 {% block content %}
  
 <!-- Invisible span to definte wich ul and a in the navbar are actived -->
 <span id="nav_actived" style="display: none">agent,agents</span>
  
-<table class="table table-hover">
+<table id="table_datatables" class="table table-hover">
   <thead>
   <tr>
     <th scope="col">Nom</th>
@@ -25,4 +33,9 @@
   {% endfor %}
   </tbody>
 </table>
-{% endblock %}
 \ No newline at end of file
+{% endblock %}
+
+
+{% block more_scripts %}
+{% include 'datatables-includes.html' %}
+{% endblock %}
 {% extends "base_page.html" %}
+
+{% block more_heads %}
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css"/>
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css"/>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='lib/datatables-1.10.24/css/datatables.min.css') }}"/>
+{% endblock %}
+
 {% block content %}
  
 <!-- Invisible span to definte wich ul and a in the navbar are actived -->
 <span id="nav_actived" style="display: none">projet,projects</span>
  
-<table class="table table-hover">
+<table id="table_datatables" class="table table-hover">
   <thead>
   <tr>
     {% for c_title in projects[0][1:] %}
@@ -28,3 +35,7 @@
   </tbody>
 </table>
 {% endblock %}
+
+{% block more_scripts %}
+{% include 'datatables-includes.html' %}
+{% endblock %}