new: Add pagination on index

Use datatables instead of bootstrap-table

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

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 %}

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>

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(){