Merge pull request #59 from devinmatte/searching_sorting

Adding datatables searching and sorting to active packets

Author: devinmatte

frontend/scss/components/_datatables.scss

@@ -33,3 +33,9 @@ div {
   }
 }
 
+table {
+  .dataTable {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+}

packet/static/js/tables.js

@@ -0,0 +1,15 @@
+$(document).ready(function () {
+
+    $('#active_packets_table').DataTable({
+        "searching": true,
+        "order": [[2, 'desc']],
+        "paging": false,
+        "info": false,
+        "columnDefs": [
+            {
+                "type": "num-fmt", "targets": 1
+            }
+        ]
+    });
+
+});

packet/templates/active_packets.html

@@ -14,13 +14,12 @@ <h3 class="page-title">Active Packets</h3>
                         <div class="card-body table-fill">
                             <div class="card-body table-fill">
                                 <div class="table-responsive">
-                                    <table class="table table-striped no-bottom-margin" data-module="table"
-                                           data-searchable="true" data-sort-column="3" data-sort-order="asc"
-                                           data-length-changable="true" data-paginated="false">
+                                    <table id="active_packets_table" class="table table-striped no-bottom-margin">
                                         <thead>
                                         <tr>
                                             <th>Name</th>
                                             <th>Signatures</th>
+                                            <th>Sign</th>
                                         </tr>
                                         </thead>
                                         <tbody>
@@ -76,3 +75,8 @@ <h3 class="page-title">Active Packets</h3>
         </div>
     </div>
 {% endblock %}
+
+{% block scripts %}
+    {{ super() }}
+    <script src="/static/js/tables.js"></script>
+{% endblock %}

packet/templates/include/head.html

@@ -24,9 +24,7 @@
 
     <link rel="mask-icon" href="{{ url_for('static', filename='assets/logo.svg') }}" color="#b0197e">
 
-    <link rel="stylesheet" type="text/css"
-          href="https://cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.dataTables.min.css">
-    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
 
     <!-- Bootstrap core CSS -->
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"

packet/templates/include/scripts.html

@@ -3,25 +3,10 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
 
-<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
-<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
+<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
+<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
 <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.min.js"></script>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
 
 <script src="/static/js/signing.js"></script>
-
-<script type="text/javascript">
-  $(document).ready(function(){
-  	$('[data-toggle="tooltip"]').tooltip()
-    $.adaptiveBackground.run({
-    	exclude: [ 'rgb(0,0,0)', 'rgb(255,255,255)' ],
-        shadeVariation: 'blend',
-        shadePercentage: -.8,
-        shadeColors: {
-            dark: 'rgb(255,255,255)',
-            light: 'rgb(0,0,0)'
-        }
-    });
-  });
-</script>