<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<!--
<script src="https://cdn.datatables.net/plug-ins/1.13.7/sorting/absolute.js"></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<link href="https://cdn.datatables.net/datetime/1.5.0/css/dataTables.dateTime.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/datetime/1.5.0/js/dataTables.dateTime.js"></script>
<link href="https://cdn.datatables.net/searchbuilder/1.5.0/css/searchBuilder.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/searchbuilder/1.5.0/js/dataTables.searchBuilder.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<div class="container">
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date (DD/MM)</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>02/12/2023</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>30/06/2023</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>24/05/2023</td>
<td>$4,800</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>30/09/2022</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jenna Elliott</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>33</td>
<td>22/01/2022</td>
<td>$5,300</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td></td>
<td>$4,800</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td></td>
<td>$2,875</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
/*! © SpryMedia Ltd - datatables.net/license */
(function( factory ){
if ( typeof define === 'function' && define.amd ) {
// AMD
define( ['jquery', 'datatables.net'], function ( $ ) {
return factory( $, window, document );
} );
}
else if ( typeof exports === 'object' ) {
// CommonJS
var jq = require('jquery');
var cjsRequires = function (root, $) {
if ( ! $.fn.dataTable ) {
require('datatables.net')(root, $);
}
};
if (typeof window === 'undefined') {
module.exports = function (root, $) {
if ( ! root ) {
// CommonJS environments without a window global must pass a
// root. This will give an error otherwise
root = window;
}
if ( ! $ ) {
$ = jq( root );
}
cjsRequires( root, $ );
return factory( $, root, root.document );
};
}
else {
cjsRequires( window, jq );
module.exports = factory( jq, window, window.document );
}
}
else {
// Browser
factory( jQuery, window, document );
}
}(function( $, window, document, undefined ) {
'use strict';
var DataTable = $.fn.dataTable;
/**
* When sorting a DataTable you might find that you want to keep a specific
* item at the top or bottom of the table. For example when sorting a column
* of numbers, if a value is `null` or `N/A` you might want to keep it at the
* bottom of the table, regardless of if ascending or descending sorting is
* applied. This plug-in provides that ability.
*
* You must call the `$.fn.dataTable.absoluteOrder` with information about the
* value(s) you wish to make absolute in the sorting order and store the
* returned value, assigning it to the `columns.type` option for the column
* you wish this sorting to be applied to.
*
* For number based columns a `$.fn.dataTable.absoluteOrderNumber` function is
* also available.
*
* @name Absolute sorting
* @summary Keep one or more items at the top and/or bottom of a table when sorting
* @author [Allan Jardine](//datatables.net)
* @depends DataTables 1.10+
*
* @example
* var namesType = $.fn.dataTable.absoluteOrder( [
* { value: '', position: 'top' }
* ] );
*
* var numbersType = $.fn.dataTable.absoluteOrderNumber( [
* { value: 'N/A', position: 'bottom' }
* ] );
*
* $('#example').DataTable( {
* columnDefs: [
* { type: namesType, targets: 0 },
* { type: numbersType, targets: 1 }
* ]
* } );
*/
// Unique value allowing multiple absolute ordering use cases on a single page.
var _unique = 0;
// Function to encapsulate code that is common to both the string and number
// ordering plug-ins.
var _setup = function (values) {
if (!Array.isArray(values)) {
values = [values];
}
var o = {
name: 'moment-DD/MM/YYYY',
alwaysTop: {},
alwaysBottom: {},
asc: function (a, b, isNumber) { },
desc: function (a, b, isNumber) { },
};
// In order to provide performance, the symbols that are to be looked for
// are stored as parameter keys in an object, allowing O(1) lookup, rather
// than O(n) if it were in an array.
for (var i = 0, ien = values.length; i < ien; i++) {
var conf = values[i];
if (typeof conf === 'string') {
o.alwaysTop[conf] = true;
}
else if (conf.position === undefined || conf.position === 'top') {
o.alwaysTop[conf.value] = true;
}
else {
o.alwaysBottom[conf.value] = true;
}
}
// Ascending ordering method
o.asc = function (a, b, isNumber) {
if (o.alwaysTop[a] && o.alwaysTop[b]) {
return 0;
}
else if (o.alwaysBottom[a] && o.alwaysBottom[b]) {
return 0;
}
else if (o.alwaysTop[a] || o.alwaysBottom[b]) {
return -1;
}
else if (o.alwaysBottom[a] || o.alwaysTop[b]) {
return 1;
}
if (isNumber) {
// Cast as a number if required
if (typeof a === 'string') {
a = a.replace(/[^\d\-\.]/g, '') * 1;
}
if (typeof b === 'string') {
b = b.replace(/[^\d\-\.]/g, '') * 1;
}
}
return a < b ? -1 : a > b ? 1 : 0;
};
// Descending ordering method
o.desc = function (a, b, isNumber) {
if (o.alwaysTop[a] && o.alwaysTop[b]) {
return 0;
}
else if (o.alwaysBottom[a] && o.alwaysBottom[b]) {
return 0;
}
else if (o.alwaysTop[a] || o.alwaysBottom[b]) {
return -1;
}
else if (o.alwaysBottom[a] || o.alwaysTop[b]) {
return 1;
}
if (isNumber) {
if (typeof a === 'string') {
a = a.replace(/[^\d\-\.]/g, '') * 1;
}
if (typeof b === 'string') {
b = b.replace(/[^\d\-\.]/g, '') * 1;
}
}
return a < b ? 1 : a > b ? -1 : 0;
};
return o;
};
// String based ordering
DataTable.absoluteOrder = function (values) {
var conf = _setup(values);
DataTable.ext.type.order[conf.name + '-asc'] = conf.asc;
DataTable.ext.type.order[conf.name + '-desc'] = conf.desc;
// Return the name of the sorting plug-in that was created so it can be used
// with the `columns.type` parameter. There is no auto-detection here.
return conf.name;
};
// Number based ordering - strips out everything but the number information
DataTable.absoluteOrderNumber = function (values) {
var conf = _setup(values);
DataTable.ext.type.order[conf.name + '-asc'] = function (a, b) {
return conf.asc(a, b, true);
};
DataTable.ext.type.order[conf.name + '-desc'] = function (a, b) {
return conf.desc(a, b, true);
};
return conf.name;
};
return DataTable;
}));
var NullValueLast = $.fn.dataTable.absoluteOrder( {
value: null, position: 'bottom'
} );
var table = $('#example').DataTable( {
dom: 'Qfrtip',
"columns": [
{ "name": "name" },
{ "name": "position" },
{ "name": "office"},
{ "name": "age" },
{ "name": "Start date (DD/MM)",
type: NullValueLast,
render: function (data, type){
if (type === "sort") {
if (data) {
return moment(data, 'DD/MM/YYYY');
}
return null;
}
return data;
}
},
{ "name": "salary" },
],
initComplete: function (settings) {
console.log(settings)
}
});
You can jump to the latest bin by adding /latest
to your URL
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + [ | Indents selected lines |
ctrl + ] | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Clone Bin |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |