Add export buttons to data tables
Change-Id: Ie05c400b0e19107148474a8f8735e83d92235107
diff --git a/css/derekovecs.css b/css/derekovecs.css
index be98310..922a37a 100644
--- a/css/derekovecs.css
+++ b/css/derekovecs.css
@@ -1,4 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@300;400;700;800&family=Fira+Sans:wght@300;400;700&display=swap');
+@import url('https://cdn.datatables.net/buttons/3.0.0/css/buttons.dataTables.css');
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
body, input {
font-family: 'Fira Sans', sans-serif;
@@ -199,6 +201,15 @@
// border-bottom: 1px solid #111;
}
+.dataTables_filter input { width: 16ex }
+
+.dt-button {
+ margin-top: 4px !important;
+ padding: 0px 6px 0px 6px !important;
+ border: none;
+ border-collapse:collapse;
+}
+
g.u a, g.tsnet a, td.collocator {
cursor: pointer;
}
diff --git a/js/derekovecs.js b/js/derekovecs.js
index 14792ff..711617e 100644
--- a/js/derekovecs.js
+++ b/js/derekovecs.js
@@ -40,7 +40,13 @@
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
- "dom": '<"top">rt<"bottom"flp><"clear">',
+ "dom": '<"top">rt<"bottom"flpB><"clear">',
+ buttons: [
+ { extend: 'copyHtml5', text: '<i class="fa fa-files-o"></i>', titleAttr: 'Copy' },
+ { extend: 'csvHtml5', text: '<i class="fa fa-file-text-o"></i>', titleAttr: 'CSV', filename: currentWords+'_syn_neighbours' },
+ { extend: 'excelHtml5', text: '<i class="fa fa-file-excel-o"></i>', titleAttr: 'Excel', filename: currentWords+'_sny_neighbours',
+ }
+ ],
"columns": [
{ "data": "rank", type: "allnumeric" },
{ "data": "dist", render: function ( data, type, row ) {return data.toFixed(3) }},
@@ -133,7 +139,13 @@
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
- "dom": '<"top">rt<"bottom"flp><"clear">',
+ "dom": '<"top">rt<"bottom"flpB><"clear">',
+ buttons: [
+ { extend: 'copyHtml5', text: '<i class="fa fa-files-o"></i>', titleAttr: 'Copy' },
+ { extend: 'csvHtml5', text: '<i class="fa fa-file-text-o"></i>', titleAttr: 'CSV', filename: currentWords+'_collocates' },
+ { extend: 'excelHtml5', text: '<i class="fa fa-file-excel-o"></i>', titleAttr: 'Excel', filename: currentWords+'_collocates', exportOptions: { columns: ':visible' } ,
+ }
+ ],
"columns": [
// { "data": "pos", width: "7%", sClass: "dt-center mono compact", render: function ( data, type, row ) {return bitvec2window(data, row.heat, row.word) }},
{ "data": "llr", render: function ( data, type, row ) {return toFixed(data, 0) }},
diff --git a/templates/index.html.ep b/templates/index.html.ep
index 88ff568..e9933a1 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -6,10 +6,15 @@
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://fonts.googleapis.com/css?family=Lato|Roboto+Condensed" rel="stylesheet">
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
- <script src = "https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
+ <script src = "https://cdn.datatables.net/1.13.10/js/jquery.dataTables.min.js"></script>
<script src = "https://cdn.datatables.net/fixedcolumns/3.2.5/js/dataTables.fixedColumns.min.js"></script>
- <script src = "https://cdn.datatables.net/plug-ins/1.10.18/sorting/scientific.js"></script>
+ <script src = "https://cdn.datatables.net/plug-ins/1.13.10/sorting/scientific.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML'></script>
+ <script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
+ <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
+ <script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/ical.js/1.5.0/ical.js"
integrity="sha512-UxWd2RMDGpYwYuDeU2Fs+nd51gw4ZLQY0D9wWZ3NuanNSk6QQmWCZ6C+rvI0lJ/b/nZtBQ8RVESA9DN9r65dUg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
@@ -17,7 +22,7 @@
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js"
integrity="sha512-42PE0rd+wZ2hNXftlM78BSehIGzezNeQuzihiBCvUEB3CVxHvsShF86wBWwQORNxNINlBPuq7rG4WWhNiTVHFg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.min.css">
+ <link rel="stylesheet" href="https://cdn.datatables.net/1.13.10/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="/derekovecs/css/derekovecs.css">
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
@@ -154,7 +159,13 @@
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
- "dom": '<"top">rt<"bottom"flp><"clear">',
+ "dom": '<"top">rt<"bottom"flpB><"clear">',
+ buttons: [
+ { extend: 'copyHtml5', text: '<i class="fa fa-files-o"></i>', titleAttr: 'Copy' },
+ { extend: 'csvHtml5', text: '<i class="fa fa-file-text-o"></i>', titleAttr: 'CSV', filename: currentWords+'_para_neighbours' },
+ { extend: 'excelHtml5', text: '<i class="fa fa-file-excel-o"></i>', titleAttr: 'Excel', filename: currentWords+'_para_neighbours', exportOptions: { columns: ':visible' } ,
+ }
+ ],
"initComplete":function(settings, json) {
$('td.paradigmator a').on('mousedown', function(e) {
return paradigmatorClick(e, paraResults[0][0].word, this.childNodes["0"].textContent);
@@ -208,8 +219,14 @@
"bScrollCollapse": true,
"bPaginate": false,
"bJQueryUI": true,
- "dom": '<"top">rt<"bottom"flp><"clear">',
- "columns": [
+ "dom": '<"top">rt<"bottom"flpB><"clear">',
+ buttons: [
+ { extend: 'copyHtml5', text: '<i class="fa fa-files-o"></i>', titleAttr: 'Copy' },
+ { extend: 'csvHtml5', text: '<i class="fa fa-file-text-o"></i>', titleAttr: 'CSV', filename: currentWords+'_syn_neighbours' },
+ { extend: 'excelHtml5', text: '<i class="fa fa-file-excel-o"></i>', titleAttr: 'Excel', filename: currentWords+'_syn_neighbours', exportOptions: { columns: ':visible' } ,
+ }
+ ],
+ "columns": [
{ "data": "rank", type: "allnumeric" },
{ "data": "pos", width: "7%", sClass: "dt-center mono compact", render: function ( data, type, row ) {return bitvec2window(data, row.heat, row.word) }},
{ "data": "max", render: function ( data, type, row ) {return data.toFixed(3) }},
@@ -271,7 +288,7 @@
"bPaginate": false,
"bJQueryUI": true,
"dom": '<"top">rt<"bottom"flp><"clear">',
- "columns": [
+ "columns": [
{ "data": "v", render: function ( data, type, row ) {return data.toFixed(3) }},
{ "data": "w", sClass: "paradigmator", render: function ( data, type, row ) {urlprefix.set("word", data); return '<a href="?' + urlprefix + '">' + data + '</a>' } }
],