added table with the export log. fixes #285

smash/web/templates/export/index.html

 {% extends "_base.html" %}
 {% load static %}
+{% load filters %}
 
 {% block styles %}
     {{ block.super }}
     <link rel="stylesheet" href="{% static 'css/export.css' %}">
+    <link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.css' %}">
     <style type="text/css">
         ul.list_of_fields{
           columns: 3;
@@ -92,37 +94,82 @@
             <li><a onclick="addFields(this, 'appointment_fields')" href="{% url 'web.views.export_to_csv' 'appointments' %}"><i class="fa fa-file-text-o"></i> CSV -
                 Text based</a></li>
         </ul>
+
+        <h3>Export Log</h3>
+
+        <div class="box-body">
+            <table id="table" class="table table-bordered table-striped">
+                <thead>
+                <tr>
+                    <th>Date</th>
+                    <th>Author</th>
+                    <th>Description</th>
+                    <th>Request Path</th>
+                </tr>
+                </thead>
+                <tbody>
+                {% for provenance in provenances %}
+                    <tr>
+                        <td data-sort="{{ provenance.modification_date | timestamp }}">{{ provenance.modification_date }}</td>
+                        <td>{{ provenance.modification_author }}</td>
+                        <td>{{ provenance.modification_description }}</td>
+                        <td>{{ provenance.request_path }}</td>
+                    </tr>
+                {% endfor %}
+                </tbody>
+            </table>
+        </div>
     </div>
 
     <div class="box-body">
     </div>
-<script type="text/javascript">
-    window.onload = function() {
-        $('.list_of_fields_header').tooltip();
-        $('.list_of_fields_header').click(function(e){
-            $(e.target).children('i.fa').toggleClass('fa-expand');
-            $(e.target).children('i.fa').toggleClass('fa-compress');
-        });
-    };
-    function addFields(e, cls){
-        var fields = $(`.${cls} > li > input:checked`).map(function(i,e){
-            return e.value;
-        }).toArray().join(',');
-        //remove parameters from previous calls if any
-        //attention: we are assuming the original url doesn't have any parameter
-        $(e).attr('href', function() {
-            return this.href.split('?')[0] + `?fields=${fields}`;
-        });
-    }
-    function toggleCheckboxes(e){
-        if($(e).text().toLowerCase() == 'uncheck all'){
-            $(e).siblings('ul').find('input[type="checkbox"]').prop('checked', false);
-            $(e).text('Check All');
-        }else if($(e).text().toLowerCase() == 'check all'){
-            $(e).siblings('ul').find('input[type="checkbox"]').prop('checked', true);
-            $(e).text('Uncheck All');
-        }
-    }
 
-</script>
 {% endblock maincontent %}
+
+{% block scripts %}
+    {{ block.super }}
+
+    <script src="{% static 'AdminLTE/plugins/datatables/jquery.dataTables.min.js' %}"></script>
+    <script src="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.min.js' %}"></script>
+
+    <script>
+        window.onload = function() {
+            $('.list_of_fields_header').tooltip();
+            $('.list_of_fields_header').click(function(e){
+                $(e.target).children('i.fa').toggleClass('fa-expand');
+                $(e.target).children('i.fa').toggleClass('fa-compress');
+            });
+        };
+        function addFields(e, cls){
+            var fields = $(`.${cls} > li > input:checked`).map(function(i,e){
+                return e.value;
+            }).toArray().join(',');
+            //remove parameters from previous calls if any
+            //attention: we are assuming the original url doesn't have any parameter
+            $(e).attr('href', function() {
+                return this.href.split('?')[0] + `?fields=${fields}`;
+            });
+        }
+        function toggleCheckboxes(e){
+            if($(e).text().toLowerCase() == 'uncheck all'){
+                $(e).siblings('ul').find('input[type="checkbox"]').prop('checked', false);
+                $(e).text('Check All');
+            }else if($(e).text().toLowerCase() == 'check all'){
+                $(e).siblings('ul').find('input[type="checkbox"]').prop('checked', true);
+                $(e).text('Uncheck All');
+            }
+        }
+
+        $(function () {
+            $('#table').DataTable({
+                "paging": true,
+                "lengthChange": false,
+                "searching": true,
+                "ordering": true,
+                "order": [[ 0, "desc" ]],
+                "info": true,
+                "autoWidth": false
+            });
+        });
+    </script>
+{% endblock scripts %}
\ No newline at end of file