Last active
February 16, 2020 18:18
-
-
Save four4to6/a2830df8268a6b44ea66d5763fe2ad4d to your computer and use it in GitHub Desktop.
Optimal settings for DataTables
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Write to the head of your html file. --> | |
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/b-print-1.6.1/datatables.min.css"/> | |
<style> | |
table.dataTable thead tr th, table.dataTable tfoot tr th { | |
background-color: #ffffff; | |
border: none; | |
} | |
.dataTables_wrapper .dt-buttons { | |
float: right | |
} | |
.custom-btn { | |
cursor: pointer; | |
margin-right: 5px | |
} | |
i.fas { | |
color: #ccc | |
} | |
div.toolbar { | |
margin: 0 15px 0 0; | |
float: left; | |
color: #dc143c; | |
font-weight: bold | |
} | |
div.container_t { | |
margin: 0 auto; | |
max-width: 100%; | |
} | |
#resize_wrapper { | |
position: relative; | |
box-sizing: border-box; | |
margin: 15px 0 20px; | |
height: 480px; | |
padding: 1.5px 1.5px 1.5px; | |
background-color: #ffffff | |
} | |
table.dataTable td, table.dataTable th { | |
white-space: nowrap | |
} | |
@media (max-width: 450px) { | |
#resize_wrapper { | |
margin: 5px 0 60px; | |
} | |
div.toolbar { | |
white-space: nowrap; | |
margin: 0 30px 5px 0 | |
} | |
} | |
</style> | |
<!-- Write it in the body of your html file. --> | |
<!-- Table --> | |
<div class="container_t"> | |
<div id="resize_wrapper"> | |
<table id="example" class="display nowrap" cellspacing="0" width="100%"> | |
<thead> | |
<tr> | |
<th>ルナの血液検査結果</th> | |
<th>退院時 | |
</th><th>検査 1 (前比)</th> | |
<th>検査 2 (前比)</th> | |
<th>検査 3 (前比)</th> | |
<th> <strong>今検査</strong> (前比) </th> | |
<th>正常域 | |
</th></tr> | |
</thead> | |
<tbody> | |
<tr> | |
<td>BUN-PS <span class="font-size" style="font-size: 12px">(mg/dl)</span></td> | |
<td>48.4 </td> | |
<td>52.1 (⤴)</td> | |
<td>56.0<strong> </strong>(⤴)</td> | |
<td>52.1 (⤵)</td> | |
<td><span style="font-weight:bold"><span style="color: #dc143c" class="text-color">47.8</span></span> (⤵)</td> | |
<td><span class="font-size" style="font-size: 14px">17.0-35.0</span></td> | |
</tr> | |
<tr> | |
<td>CRE-PS <span class="font-size" style="font-size: 12px">(mg/dl)</span></td> | |
<td><span class="text-color" style="color: #dc143c"><span style="font-weight:bold">2.87</span></span> | |
</td> | |
<td>3.55 (⤴)</td> | |
<td>2.80 (⤵)</td> | |
<td>2.42 (⤵)</td> | |
<td><span style="font-weight:bold"><span style="color: #dc143c" class="text-color">2.36</span></span> (⤵)</td> | |
<td><span class="font-size" style="font-size: 14px">0.8-1.8</span></td> | |
</tr> | |
<tr> | |
<td>IP-PS<span class="font-size" style="font-size: 12px"> (mg/dl)</span></td> | |
<td>5.0</td> | |
<td>4.3 (⤵)</td> | |
<td>3.0 (⤵)</td> | |
<td>3.5 (⤴)</td> | |
<td><span style="font-weight:bold">4.3</span> (⤴)</td> | |
<td><span class="font-size" style="font-size: 14px">2.7-6.4</span></td> | |
</tr> | |
<tr> | |
<td>RBC<span class="font-size" style="font-size: 12px"> (10⁶/㎕)</span></td> | |
<td><span style="font-weight:bold">4.51</span></td> | |
<td>3.82 (⤵)</td> | |
<td>3.50 (⤵)</td> | |
<td>4.33<span style="color: #000080" class="text-color"> (⤴)</span></td> | |
<td><span style="font-weight:bold">4.44</span> (⤴)</td> | |
<td><span class="font-size" style="font-size: 12px">5.50-8.50</span></td> | |
</tr> | |
<tr> | |
<td>Hgb<span class="font-size" style="font-size: 12px"> (g/dL)</span></td> | |
<td><span style="font-weight:bold">6.7</span></td> | |
<td>5.4 (⤵)</td> | |
<td>5.1 (⤵)</td> | |
<td>6.6<span style="color: #000080" class="text-color"> (⤴)</span></td> | |
<td><span style="font-weight:bold">6.6</span> ( - )</td> | |
<td><span class="font-size" style="font-size: 14px">10-15</span></td> | |
</tr> | |
<tr> | |
<td>Hct <span class="font-size" style="font-size: 12px">(L%)</span></td> | |
<td><span style="font-weight:bold">22.0</span></td> | |
<td>17.5 (⤵)</td> | |
<td>16.3 (⤵)</td> | |
<td>20.0<span style="color: #000080" class="text-color"> (⤴)</span></td> | |
<td><span style="font-weight:bold">20.4</span> (⤴)</td> | |
<td><span class="font-size" style="font-size: 14px">32-40</span></td> | |
</tr> | |
</tbody> | |
<tfoot> | |
<tr> | |
<th>ルナの血液検査結果</th> | |
<th>退院時 | |
</th><th>検査 1 (前比)</th> | |
<th>検査 2 (前比)</th> | |
<th>検査 3 (前比)</th> | |
<th> <strong>今検査</strong> (前比) </th> | |
<th>正常域 | |
</th></tr> | |
</tfoot> | |
</table> | |
</div> | |
</div> | |
<!-- Write in the footer of your html file. --> | |
<!-- remember to include jQuery as well --> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script> | |
<script src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.20/b-1.6.1/b-html5-1.6.1/b-print-1.6.1/datatables.min.js"></script> | |
<script src="https://cdn.datatables.net/plug-ins/1.10.20/features/scrollResize/dataTables.scrollResize.min.js"></script> | |
<script> | |
$(function () { | |
$("#example").DataTable({ | |
scrollResize: true, | |
scrollX: true, | |
scrollY: 100, | |
scrollCollapse: true, | |
paging: false, | |
lengthChange: false, | |
language: { | |
info: '<i class="fas fa-sync fa-spin"></i> Data _START_ to _END_ of _TOTAL_ entries', | |
buttons: { | |
copyTitle: 'クリップボードにコピーしました!' | |
} | |
}, | |
dom: '<"toolbar">lBrtip', | |
buttons: { | |
dom: { | |
button: { | |
tag: "i", | |
className: "" | |
} | |
}, | |
buttons: [{ | |
title: 'Data from Luna\'s blood test report', | |
titleAttr: 'Copy', | |
extend: 'copy', | |
className: 'custom-btn fa-2x fas fa-copy', | |
text: '' | |
}, { | |
title: 'Data from Luna\'s blood test report', | |
titleAttr: 'Download as PDF', | |
extend: 'pdfHtml5', | |
className: 'custom-btn fa-2x fas fa-file-pdf', | |
text: '' | |
}, { | |
title: 'Data from Luna\'s blood test report', | |
titleAttr: 'Download as Excel', | |
extend: 'excelHtml5', | |
className: 'custom-btn fa-2x fas fa-file-excel', | |
text: '' | |
}, { | |
title: 'Data from Luna\'s blood test report', | |
titleAttr: 'Download as CSV', | |
extend: 'csvHtml5', | |
className: 'custom-btn fa-2x fas fa-file-csv', | |
text: '' | |
}, { | |
title: 'Data from Luna\'s blood test report', | |
titleAttr: 'Print', | |
extend: 'print', | |
className: 'custom-btn fa-2x fas fa-print', | |
messageTop: 'Displays each inspection item value.', | |
messageBottom: 'Data from periodic inspection results.', | |
text: '' | |
}, ] | |
} | |
}); | |
$("div.toolbar").html('Data from Luna\'s blood test report'); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment