From 2092038a69488952fa9d5502d60e606eec8b00f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Vinot?= <raphael@vinot.info>
Date: Thu, 2 Apr 2020 17:37:27 +0200
Subject: [PATCH] new: Add pagination on index

Use datatables instead of bootstrap-table
---
 website/3rdparty.sh              |  6 +++---
 website/web/templates/index.html | 34 ++++++++++++++++++++++++++------
 website/web/templates/main.html  |  4 ----
 website/web/templates/tree.html  |  2 ++
 4 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/website/3rdparty.sh b/website/3rdparty.sh
index bd32370..c9d8494 100755
--- a/website/3rdparty.sh
+++ b/website/3rdparty.sh
@@ -11,7 +11,7 @@ FileSaver="v2.0.2"
 
 wget -q https://raw.githubusercontent.com/eligrey/FileSaver.js/${FileSaver}/src/FileSaver.js -O web/static/FileSaver.js
 
-bootstrap_table="1.16.0"
+datatables="1.10.20"
 
-wget -q https://unpkg.com/bootstrap-table@${bootstrap_table}/dist/bootstrap-table.min.css -O web/static/bootstrap-table.min.css
-wget -q https://unpkg.com/bootstrap-table@${bootstrap_table}/dist/bootstrap-table.min.js -O web/static/bootstrap-table.min.js
+wget -q https://cdn.datatables.net/v/bs4/dt-${datatables}/datatables.min.css -O web/static/datatables.min.css
+wget -q https://cdn.datatables.net/v/bs4/dt-${datatables}/datatables.min.js -O web/static/datatables.min.js
diff --git a/website/web/templates/index.html b/website/web/templates/index.html
index d722792..42fc486 100644
--- a/website/web/templates/index.html
+++ b/website/web/templates/index.html
@@ -4,6 +4,30 @@
 
 {% block title %}Lookyloo{% endblock %}
 
+{% block scripts %}
+{{ super() }}
+<script src='{{ url_for('static', filename='datatables.min.js') }}'></script>
+<script>
+$(document).ready(function () {
+  $('#table').DataTable( {
+    "order": [[ 1, "desc" ]],
+    "pageLength": 50,
+    "columns": [
+        { "orderable": false, "width": 400 },
+        { "orderable": false, "width": 150 },
+        { "orderable": false, "width": 400 }
+    ]
+  } );
+});
+</script>
+{% endblock %}
+
+{% block styles %}
+{{ super() }}
+<link rel="stylesheet" href="{{ url_for('static', filename='datatables.min.css') }}">
+{% endblock %}
+
+
 {% block content %}
   <center>
     <a href="{{ url_for('scrape_web') }}">
@@ -17,14 +41,13 @@
     {{ render_messages(container=True, dismissible=True) }}
   </center>
 
-  <center>
   <div class="table-responsive">
-  <table id="table" class="table" data-toggle="table" data-search="true">
+  <table id="table" class="table" style="width:96%">
     <thead>
      <tr>
-       <th data-width="200">Page</th>
-       <th data-width="80">Timestamp</th>
-       <th data-width="200">Redirects</th>
+       <th>Page</th>
+       <th>Timestamp</th>
+       <th>Redirects</th>
      </tr>
     </thead>
     <tbody>
@@ -60,5 +83,4 @@
     </tbody>
   </table>
   </div>
-  </center>
 {% endblock %}
diff --git a/website/web/templates/main.html b/website/web/templates/main.html
index f93a3b3..9cf3367 100644
--- a/website/web/templates/main.html
+++ b/website/web/templates/main.html
@@ -10,7 +10,6 @@
     {% block styles %}
     <!-- Bootstrap CSS -->
     {{ bootstrap.load_css() }}
-    <link rel="stylesheet" href="{{ url_for('static', filename='bootstrap-table.min.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='tree.css') }}">
     {% endblock %}
 
@@ -28,9 +27,6 @@
     {% block scripts %}
     <!-- Optional JavaScript -->
     {{ bootstrap.load_js() }}
-	<script src='{{ url_for('static', filename='d3.v5.min.js') }}'></script>
-    <script src='{{ url_for('static', filename='FileSaver.js') }}'></script>
-    <script src='{{ url_for('static', filename='bootstrap-table.min.js') }}'></script>
     {% endblock %}
   </body>
 </html>
diff --git a/website/web/templates/tree.html b/website/web/templates/tree.html
index 412afab..969603c 100644
--- a/website/web/templates/tree.html
+++ b/website/web/templates/tree.html
@@ -4,6 +4,8 @@
 
 {% block scripts %}
   {{ super() }}
+  <script src='{{ url_for('static', filename='d3.v5.min.js') }}'></script>
+  <script src='{{ url_for('static', filename='FileSaver.js') }}'></script>
   <script src='{{ url_for('static', filename='tree.js') }}'></script>
   <script>
     $('#screenshot_view_button').click(function(){