Skip to content

Instantly share code, notes, and snippets.

@BonfaceKilz

BonfaceKilz/natural-tables.html

Last active September 4, 2020 20:31
Show Gist options
  • Save BonfaceKilz/b4f4dbcc9d1fdad0016ed092c1ec3a05 to your computer and use it in GitHub Desktop.
Save BonfaceKilz/b4f4dbcc9d1fdad0016ed092c1ec3a05 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
natural-tables.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Datatables Demo</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.21/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
</head>
<body>
<table id="example">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>N/A</td>
<td>Nam a sapien. </td>
</tr>
<tr>
<td>Elm11</td>
<td>Nam vestibulum accumsan nisl. </td>
</tr>
<tr>
<td>Elm12</td>
<td>Nam vestibulum accumsan nisl. </td>
</tr>
<tr>
<td>Elm2</td>
<td>Nam vestibulum accumsan nisl. </td>
</tr>
<tr>
<td>elm9</td>
<td>Nam vestibulum accumsan nisl. </td>
</tr>
<tr>
<td>elm0</td>
<td>Nam vestibulum accumsan nisl. </td>
</tr>
<tr>
<td>elm10</td>
<td>Nam vestibulum accumsan nisl. </td>
</tr>
<tr>
<td>elm1</td>
<td>Nam vestibulum accumsan nisl. </td>
</tr>
<tr>
<td>z-Elm2</td>
<td>Nam a sapien. </td>
</tr>
<tr>
<td data-order="-1">z-elm0</td>
<td>Nam a sapien. </td>
</tr>
<tr>
<td>elm13</td>
<td>Nam vestibulum accumsan nisl. </td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.21/sorting/absolute.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.21/sorting/natural.js"></script>
<script type="text/javascript">
$(document).ready(function() {
let naturalAsc = $.fn.dataTableExt.oSort["natural-ci-asc"]
let naturalDesc = $.fn.dataTableExt.oSort["natural-ci-desc"]
$.extend( $.fn.dataTableExt.oSort, {
"na-on-bottom-asc": function (a, b) {
if (a === "N/A") {
return 1;
}
if (b === "N/A") {
return -1;
}
return naturalAsc(a, b);
},
"na-on-bottom-desc": function (a, b) {
if (a === "N/A" || b === "N/A") {
return -1;
}
else {
return naturalDesc(a, b)
}
}
});
$('#example').dataTable( {
columnDefs: [
{ type: 'na-on-bottom', targets: [0] },
]
} );
} );
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment