Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Optimal settings for DataTables
<!-- 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>検査&nbsp;1 (前比)</th>
<th>検査&nbsp;2 (前比)</th>
<th>検査&nbsp;3 (前比)</th>
<th> <strong>今検査</strong>&nbsp;(前比) </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>検査&nbsp;1 (前比)</th>
<th>検査&nbsp;2 (前比)</th>
<th>検査&nbsp;3 (前比)</th>
<th> <strong>今検査</strong>&nbsp;(前比) </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
You can’t perform that action at this time.