<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>
<link href="https://nightly.datatables.net/rowgroup/css/rowGroup.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/rowgroup/js/dataTables.rowGroup.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<div style="margin-top: 20px;">
<table id="saldotable" class="display compact" style="width: 100%;"></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;
}
$(document).ready(function () {
const groupIcon = "X";
const noGroup = "Keiner Bestellung zugeordnet";
const moneyFormatter = new Intl.NumberFormat('de-DE', {
style: 'currency',
currency: 'EUR'
});
$('#saldotable').DataTable({
data: txData,
pageLength: 20,
lengthMenu: [10, 20, 30],
pagingType: 'numbers',
columns: [
{ data: "article", title: "Artikel" },
{ data: "amount_formatted", title: "Preis" },
{
data: "canceled",
title: "Storno",
"render": function (data, type, row) {
return type === 'sort' ? data : (data ? 'Ja' : 'Nein');
}
},
{
data: "timestamp",
title: "Zeit"
},
],
"rowCallback": function (row, data) {
if (data["canceled"]) {
$(row).css({"color": "#f55"});
}
},
rowGroup: {
className: 'table-group',
emptyDataGroup: noGroup,
endRender: null,
startRender: function (rows, group) {
let tr = document.createElement('tr');
if (group === noGroup) {
addCell(tr, 'Keiner Bestellung zugeordnet', 2);
} else {
var groupRows = rows.rows().data().filter(function (row) {
return row["order_id"] === group && !row["canceled"];
});
var groupAmount = groupRows
.pluck("amount")
.reduce((a, b) => a + b, 0);
addCell(tr, `${groupIcon} Bestellung ${group}`);
addCell(tr, moneyFormatter.format(groupAmount));
}
addCell(tr, '', 1);
addCell(tr, '', 1);
return tr;
},
dataSrc: "order_id"
},
columnDefs: [
{
targets: ["order_id"],
visible: false
}
],
"order": [[3, "desc"]],
"deferRender": true,
"scrollX": true
});
});
function addCell(tr, content, colSpan = 1) {
let td = document.createElement('td');
td.colSpan = colSpan;
td.innerHTML = content;
tr.appendChild(td);
}
txData = [
{
"article": "Hamburger (ohne Pommes)",
"amount": -13.37,
"amount_formatted": "-13,37€",
"canceled": 0,
"timestamp": "2024-02-17 00:14:12.102896+01",
"order_id": 25250
},
{
"article": "mit Pommes",
"amount": -0.42,
"amount_formatted": "-0,42€",
"canceled": 0,
"timestamp": "2024-02-17 00:14:12.102896+01",
"order_id": 25250
},
{
"article": "Beilagensalat",
"amount": -3.5,
"amount_formatted": "-3,50€",
"canceled": 0,
"timestamp": "2024-02-16 11:42:08.325804+01",
"order_id": 25249
},
{
"article": "Jägerschnitzel mit Pommes und Salat",
"amount": -14,
"amount_formatted": "-14,00€",
"canceled": 0,
"timestamp": "2024-02-16 11:42:04.505929+01",
"order_id": 25248
},
{
"article": "Hamburger (ohne Pommes)",
"amount": -10.5,
"amount_formatted": "-10,50€",
"canceled": 0,
"timestamp": "2024-02-16 11:42:02.090815+01",
"order_id": 25247
},
{
"article": "Hamburger (ohne Pommes)",
"amount": -10.5,
"amount_formatted": "-10,50€",
"canceled": 0,
"timestamp": "2024-01-26 13:47:11.105028+01",
"order_id": 25246
},
{
"article": "mit Ketchup",
"amount": 0,
"amount_formatted": "0,00€",
"canceled": 0,
"timestamp": "2024-01-26 13:47:11.105028+01",
"order_id": 25246
},
{
"article": "ohne Brötchen",
"amount": 0,
"amount_formatted": "0,00€",
"canceled": 0,
"timestamp": "2024-01-26 13:47:11.105028+01",
"order_id": 25246
},
{
"article": "ohne Tomaten",
"amount": 0,
"amount_formatted": "0,00€",
"canceled": 0,
"timestamp": "2024-01-26 13:47:11.105028+01",
"order_id": 25246
},
{
"article": "mit Jalapenos",
"amount": -0.7,
"amount_formatted": "-0,70€",
"canceled": 0,
"timestamp": "2024-01-26 13:47:11.105028+01",
"order_id": 25246
},
{
"article": "Bandnudeln Bolognese",
"amount": -11,
"amount_formatted": "-11,00€",
"canceled": 0,
"timestamp": "2024-01-26 13:46:53.393295+01",
"order_id": 25245
},
{
"article": "Bandnudeln Bolognese",
"amount": -11,
"amount_formatted": "-11,00€",
"canceled": 0,
"timestamp": "2024-01-26 13:46:53.393295+01",
"order_id": 25245
},
{
"article": "Jägerschnitzel mit Pommes und Salat",
"amount": -14,
"amount_formatted": "-14,00€",
"canceled": 0,
"timestamp": "2024-01-26 13:45:59.710371+01",
"order_id": 25244
},
{
"article": "Beilagensalat",
"amount": -3.5,
"amount_formatted": "-3,50€",
"canceled": 0,
"timestamp": "2024-01-26 13:34:12.258699+01",
"order_id": 25243
},
{
"article": "Beilagensalat",
"amount": -3.5,
"amount_formatted": "-3,50€",
"canceled": 0,
"timestamp": "2024-01-26 13:32:13.568755+01",
"order_id": 25242
},
{
"article": "Hamburger (ohne Pommes)",
"amount": -10.5,
"amount_formatted": "-10,50€",
"canceled": 0,
"timestamp": "2024-01-26 12:00:34.849589+01",
"order_id": 25241
},
{
"article": "Hamburger (ohne Pommes)",
"amount": -10.5,
"amount_formatted": "-10,50€",
"canceled": 0,
"timestamp": "2024-01-26 12:00:15.34133+01",
"order_id": 25240
},
{
"article": "Einzahlung Bar",
"amount": 500,
"amount_formatted": "500,00€",
"canceled": 0,
"timestamp": "2024-01-26 12:00:06.766485+01",
"order_id": null
},
{
"article": "Hamburger (ohne Pommes)",
"amount": -10.5,
"amount_formatted": "-10,50€",
"canceled": 0,
"timestamp": "2024-01-26 11:59:51.814082+01",
"order_id": 25239
},
{
"article": "Ticket Tiefgarage",
"amount": -12,
"amount_formatted": "-12,00€",
"canceled": 0,
"timestamp": "2024-01-26 01:41:58.341969+01",
"order_id": null
},
{
"article": "Beilagensalat",
"amount": -3.5,
"amount_formatted": "-3,50€",
"canceled": 0,
"timestamp": "2023-11-30 00:52:08.100391+01",
"order_id": 25238
},
{
"article": "Beilagensalat",
"amount": -3.5,
"amount_formatted": "-3,50€",
"canceled": 0,
"timestamp": "2023-11-30 00:51:59.756911+01",
"order_id": 25237
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-30 00:51:49.893084+01",
"order_id": 25236
},
{
"article": "Beilagensalat",
"amount": -3.5,
"amount_formatted": "-3,50€",
"canceled": 0,
"timestamp": "2023-11-30 00:47:39.577971+01",
"order_id": 25235
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-30 00:47:06.715428+01",
"order_id": 25234
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-30 00:47:06.715428+01",
"order_id": 25234
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 1,
"timestamp": "2023-11-29 23:02:10.06694+01",
"order_id": 25233
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 1,
"timestamp": "2023-11-29 23:02:10.06694+01",
"order_id": 25233
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 1,
"timestamp": "2023-11-29 23:02:10.06694+01",
"order_id": 25233
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 1,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 1,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 1,
"timestamp": "2023-11-29 23:00:26.783798+01",
"order_id": 25232
},
{
"article": "Beilagensalat",
"amount": -3.5,
"amount_formatted": "-3,50€",
"canceled": 0,
"timestamp": "2023-11-29 22:57:20.107622+01",
"order_id": 25231
},
{
"article": "Beilagensalat",
"amount": -3.5,
"amount_formatted": "-3,50€",
"canceled": 0,
"timestamp": "2023-11-29 22:57:02.962068+01",
"order_id": 25230
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 22:56:58.034993+01",
"order_id": 25229
},
{
"article": "Beilagensalat",
"amount": -3.5,
"amount_formatted": "-3,50€",
"canceled": 0,
"timestamp": "2023-11-29 22:56:58.034993+01",
"order_id": 25229
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 22:56:49.380076+01",
"order_id": 25228
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 22:54:37.853198+01",
"order_id": 25227
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-29 22:54:25.832144+01",
"order_id": 25226
},
{
"article": "Beilagensalat",
"amount": -3.5,
"amount_formatted": "-3,50€",
"canceled": 0,
"timestamp": "2023-11-28 02:29:37.794007+01",
"order_id": 25225
},
{
"article": "Red-Bull (0,25l)",
"amount": -2,
"amount_formatted": "-2,00€",
"canceled": 0,
"timestamp": "2023-11-28 01:26:13.777668+01",
"order_id": 25224
},
{
"article": "Toast (Konfigurierbar)",
"amount": -0.8,
"amount_formatted": "-0,80€",
"canceled": 0,
"timestamp": "2023-11-27 23:40:25.192478+01",
"order_id": 25223
},
{
"article": "mit Bionella",
"amount": -0.5,
"amount_formatted": "-0,50€",
"canceled": 0,
"timestamp": "2023-11-27 23:40:25.192478+01",
"order_id": 25223
},
{
"article": "mit Käse",
"amount": -0.5,
"amount_formatted": "-0,50€",
"canceled": 0,
"timestamp": "2023-11-27 23:40:25.192478+01",
"order_id": 25223
},
{
"article": "mit Mayonnaise",
"amount": 0,
"amount_formatted": "0,00€",
"canceled": 0,
"timestamp": "2023-11-27 23:40:25.192478+01",
"order_id": 25223
},
{
"article": "Toast (Konfigurierbar)",
"amount": -0.8,
"amount_formatted": "-0,80€",
"canceled": 0,
"timestamp": "2023-11-27 23:39:14.161004+01",
"order_id": 25221
},
{
"article": "mit Bionella",
"amount": -0.5,
"amount_formatted": "-0,50€",
"canceled": 0,
"timestamp": "2023-11-27 23:39:14.161004+01",
"order_id": 25221
},
{
"article": "mit Käse",
"amount": -0.5,
"amount_formatted": "-0,50€",
"canceled": 0,
"timestamp": "2023-11-27 23:39:14.161004+01",
"order_id": 25221
},
{
"article": "Extra Käse",
"amount": -0.5,
"amount_formatted": "-0,50€",
"canceled": 0,
"timestamp": "2023-11-27 23:39:14.161004+01",
"order_id": 25221
},
{
"article": "mit Nutella",
"amount": -0.5,
"amount_formatted": "-0,50€",
"canceled": 0,
"timestamp": "2023-11-27 23:39:14.161004+01",
"order_id": 25221
},
{
"article": "mit Schinken",
"amount": -0.5,
"amount_formatted": "-0,50€",
"canceled": 0,
"timestamp": "2023-11-27 23:39:14.161004+01",
"order_id": 25221
},
{
"article": "Apfelsaftschorle (1l)",
"amount": -2.5,
"amount_formatted": "-2,50€",
"canceled": 0,
"timestamp": "2023-11-27 23:04:27.088348+01",
"order_id": 25220
},
{
"article": "Orangensaft (1l)",
"amount": -3.5,
"amount_formatted": "-3,50€",
"canceled": 0,
"timestamp": "2023-11-27 23:04:27.088348+01",
"order_id": 25220
},
{
"article": "Beilagensalat",
"amount": -3.5,
"amount_formatted": "-3,50€",
"canceled": 0,
"timestamp": "2023-11-27 02:19:32.196249+01",
"order_id": 25219
},
{
"article": "Beilagensalat",
"amount": -3.5,
"amount_formatted": "-3,50€",
"canceled": 1,
"timestamp": "2023-11-27 02:05:04.866181+01",
"order_id": 25218
},
{
"article": "mit Essig und Öl",
"amount": 0,
"amount_formatted": "0,00€",
"canceled": 1,
"timestamp": "2023-11-27 02:05:04.866181+01",
"order_id": 25218
},
{
"article": "Apfelwein-Cola (0,33l)",
"amount": -1.65,
"amount_formatted": "-1,65€",
"canceled": 0,
"timestamp": "2023-11-27 02:05:04.866181+01",
"order_id": 25218
},
{
"article": "Apfelwein-Pur (0,33l)",
"amount": -1.65,
"amount_formatted": "-1,65€",
"canceled": 1,
"timestamp": "2023-11-27 02:05:04.866181+01",
"order_id": 25218
},
{
"article": "Kochkäseschnitzel mit Pommes und Salat",
"amount": -14.5,
"amount_formatted": "-14,50€",
"canceled": 0,
"timestamp": "2023-11-27 02:01:29.184539+01",
"order_id": 25217
}
];
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. |