From 5a3aa5593b159562900ddb666f856a5e233a2f6d Mon Sep 17 00:00:00 2001
From: charclayt <ukfeature@gmail.com>
Date: Sat, 8 Apr 2023 19:09:26 +0100
Subject: [PATCH] Added responsiveness to dashboard DataTable
DataTable displays number of rows that can fit on screen.
When row is clicked, modal is displayed to show all info.
---
src/data.js | 21 +++++++++++++++++++++
src/index.html | 6 +++++-
2 files changed, 26 insertions(+), 1 deletion(-)
diff --git a/src/data.js b/src/data.js
index 89fd6b52..5a85987f 100644
--- a/src/data.js
+++ b/src/data.js
@@ -35,7 +35,26 @@ function displayDataTable(data){
pagingType: 'full_numbers',
stateSave: true,
lengthChange: false,
+ bAutoWidth: false,
searching: false,
+ drawCallback: function() {
+ $($.fn.dataTable.tables(true)).DataTable().responsive.recalc();
+ },
+ responsive: {
+ details: {
+ type: 'column',
+ target: 'tr',
+ display: $.fn.dataTable.Responsive.display.modal( {
+ header: function ( row ) {
+ var data = row.data();
+ return 'Details for patient '+data.patient_id;
+ }
+ }),
+ renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
+ tableClass: 'table'
+ })
+ }
+ },
"columns": [
{ "data": "patient_id",
"defaultContent": "NULL"},
@@ -75,6 +94,8 @@ function displayDataTable(data){
"defaultContent": "NULL"},
// { data: "user_id" }
]
+ }).on( 'select', function ( e, dt, type, indexes ) {
+ //if not responsive view launch responsive modal
});
// })
}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 1ce6b10c..4a13ed9a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,10 +6,14 @@
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css" />
-
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
+
+ <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.4.1/css/responsive.dataTables.min.css">
+ <script src="https://cdn.datatables.net/responsive/2.4.1/js/dataTables.responsive.min.js"></script>
+
<script type="text/javascript" src="data.js"></script>
<link rel="stylesheet" href="index.css" />
+
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.css">
</head>
--
GitLab