Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Font Awesome 5 in Data Tables
<!-- 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-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/r-2.2.3/datatables.min.css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<link rel="stylesheet" href="dataTables.fontAwesome.css">
<style>
.custom-btn {
cursor: pointer;
margin-right: 5px;
}
i.fas {
color: #ccc;
}
</style>
<!-- Write it in the body of your html file. -->
<!-- Table -->
<figure>
<figcaption><span style="font-weight:bold">Data from Luna's blood test report</span></figcaption>
<table class="display nowrap" id="table_id8" style="width:100%;">
<thead>
<tr>
<th>ルナの血液検査結果</th>
<th>退院時</th>
<th>検査 (前比)</th>
<th>再検査 (前比)</th>
<th><span class="text-color" style="color: #000080"><span style="font-weight:bold">今検査</span> (前比)</span>
</th>
<th>正常域</th>
</tr>
</thead>
<tbody>
<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><span class="text-color" style="color: #000080"><span style="font-weight:bold">4.33</span> (⤴)</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><span class="text-color" style="color: #000080"><span style="font-weight:bold">6.6</span> (⤴)</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><span class="text-color" style="color: #000080"><span style="font-weight:bold">20.0</span> (⤴)</span>
</td>
<td><span class="font-size" style="font-size: 14px">32-40</span></td>
</tr>
<tr>
<td>BUN-PS <span class="font-size" style="font-size: 12px">(mg/dl)</span></td>
<td>48.4 </td>
<td><span style="font-weight:bold">52.1</span> (⤴)</td>
<td><strong>56.0 </strong>(⤴)</td>
<td><span class="text-color" style="color: #dc143c"><span style="font-weight:bold">52.1</span> (⤵)</span>
</td>
<td><span class="font-size" style="font-size: 12px">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><span style="font-weight:bold">3.55</span> (⤴)</td>
<td><span style="font-weight:bold">2.80</span> (⤵)</td>
<td><span class="text-color" style="color: #dc143c"><span style="font-weight:bold">2.42</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><span style="font-weight:bold">4.3</span> (⤵)</td>
<td><span style="font-weight:bold">3.0</span> (⤵)</td>
<td><span class="text-color" style="color: #dc143c"><span style="font-weight:bold">3.5</span> (⤴)</span>
</td>
<td><span class="font-size" style="font-size: 14px">2.7-6.4</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>ルナの血液検査結果</th>
<th>退院時</th>
<th>検査 (前比)</th>
<th>再検査 (前比)</th>
<th><span class="text-color" style="color: #000080"><span style="font-weight:bold">今検査</span> (前比)</span>
</th>
<th>正常域</th>
</tr>
</tfoot>
</table>
</figure>
<!-- 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-flash-1.6.1/b-html5-1.6.1/b-print-1.6.1/r-2.2.3/datatables.min.js"></script>
<script>
$(function () {
$('#table_id8').dataTable({
responsive: true,
"lengthMenu": [
[2, 4, -1],
[2, 4, "All"]
],
"pagingType": "full_numbers",
"language": {
"info": "Data _START_ to _END_ of _TOTAL_ entries",
"paginate": {
"previous": "Prev",
"first": " First",
"last": "Last "
}
},
dom: 'Bfrtip',
buttons: {
//reset class and change the rendered tag
//from <button> to <i>
dom: {
button: {
tag: 'i',
className: ''
}
},
//since we now have completely unstyled icons add
//some space between them trough a .custom-btn class
buttons: [{
titleAttr: 'Copy to clipboard',
extend: 'copy',
className: 'custom-btn fa-2x fas fa-copy',
text: ''
}, {
titleAttr: 'Download as PDF',
extend: 'pdfHtml5',
className: 'custom-btn fa-2x fas fa-file-pdf',
text: ''
}, {
titleAttr: 'Download as Excel',
extend: 'excelHtml5',
className: 'custom-btn fa-2x fas fa-file-excel',
text: ''
}, {
titleAttr: 'Download as CSV',
extend: 'csvHtml5',
className: 'custom-btn fa-2x fas fa-file-csv',
text: ''
}, {
titleAttr: 'Print view',
extend: 'print',
className: 'custom-btn fa-2x fas fa-print',
text: ''
}, ]
}
});
});
</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.