File
Login or Register via GitHub
<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://cdn.datatables.net/rowgroup/1.0.2/css/rowGroup.dataTables.min.css" rel="stylesheet" type="text/css" /> <script src="https://cdn.datatables.net/rowgroup/1.0.2/js/dataTables.rowGroup.min.js"></script> <!-- <script src="https://cdn.datatables.net/fixedcolumns/3.3.2/js/dataTables.fixedColumns.min.js"></script> --> <meta charset=utf-8 /> <title>DataTables - JS Bin</title> </head> <body> <div class="container"> <table class="table table-bordered table-hover display" id="example"> <thead> <tr> <th>Type</th> <th>Client</th> <th>Project</th> <th>Total</th> <th>Nov 2020</th> <th>Dec 2020</th> <th>Jan 2021</th> <th>Feb 2021</th> <th>Mar 2021</th> <th>Apr 2021</th> <th>May 2021</th> <th>Jun 2021</th> <th>Jul 2021</th> <th>Aug 2021</th> <th>Sep 2021</th> <th>Oct 2021</th> </tr> <tr> <td> </td> <td> </td> <td> </td> <td><b>Total</b></td> <td><b>£419,316</b></td> <td><b>£333,830</b></td> <td><b>£138,917</b></td> <td><b>£37,845</b></td> <td><b>£96,901</b></td> <td><b>£77,612</b></td> <td><b>£241,873</b></td> <td><b>£249,312</b></td> <td><b>£154,628</b></td> <td><b>£160,294</b></td> <td><b>£136,566</b></td> <td><b>£144,838</b></td> </tr> </thead> <tbody> <tr> <td>RET</td> <td>value1</td> <td><a href="?id=Rj4whwQrsrlvRbfz2MmHqRqVwlNJXdnI8DrvDHHNGbyLz">RETAINER123</a></td> <td>£117,000</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>£19,500</td> <td>£19,500</td> <td>£19,500</td> <td>£19,500</td> <td>£19,500</td> <td>£19,500</td> </tr> <tr> <td>RET</td> <td>value1</td> <td><a href="?id=tSu8fUZmpRz4Sn5MzTUD2tPJzE9L4N6Ip1lQ4YfqPyvas">RETAINER44</a></td> <td>£79,200</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>£19,800</td> <td>£19,800</td> <td>£19,800</td> <td>£19,800</td> <td>0</td> <td>0</td> </tr> <tr> <td>RET</td> <td>value1</td> <td><a href="?id=Im7h4ZzDqiwTumaNoeu4UnRbG7mZp0wuaViVatY01jZYs">RETAINER576666</a></td> <td>£97,500</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>£19,500</td> <td>£19,500</td> <td>£19,500</td> <td>£19,500</td> <td>£19,500</td> <td>0</td> </tr> <tr> <td>REG</td> <td>value2</td> <td><a href="?id=5jWanOrEFrGxSfVbRORxyrwy8B7XjRFqnZk97D3vBoe6x">Project2</a></td> <td>£12,254</td> <td>£2,083</td> <td>£2,083</td> <td>£2,083</td> <td>£6,005</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> </tr> <tr> <td>REG</td> <td>value2</td> <td><a href="?id=E7NAnVC3A74et4tEhiKX4eIv506cnzeBO4Fqmzd3o2XAu">Project2</a></td> <td>£28,229</td> <td>£0</td> <td>£0</td> <td>£28,229</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> </tr> <tr> <td>REG</td> <td>value3</td> <td><a href="?id=HlPsMp8q8RaGOYR3VLM6ivl6FOTubujhWG1hL1ROXUqiv">Project1</a></td> <td>£180,200</td> <td>£180,200</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> </tr> <tr> <td>REG</td> <td>value3</td> <td><a href="?id=HlPsMp8q8RaGOYR3VLM6ivl6FOTubujhWG1hL1ROXUqiv">Project1</a></td> <td>£175,000</td> <td>£87,500</td> <td>£87,500</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> </tr> <tr> <td>REG</td> <td>value3</td> <td><a href="?id=HlPsMp8q8RaGOYR3VLM6ivl6FOTubujhWG1hL1ROXUqiv">Project1</a></td> <td>£134,900</td> <td>£0</td> <td>£67,450</td> <td>£67,450</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> </tr> <tr> <td>REG</td> <td>value2</td> <td><a href="?id=E7NAnVC3A74et4tEhiKX4eIv506cnzeBO4Fqmzd3o2XAu">Project2</a></td> <td>£28,000</td> <td>£28,000</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> </tr> <tr> <td>REG</td> <td>value3</td> <td><a href="?id=mlR8XikSNFdclkfixByHr1FNKVCX09YUGEW3ZeNfU4Tek">Project2</a></td> <td>£75,533</td> <td>£75,533</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> </tr> <tr> <td>REG</td> <td>value3</td> <td><a href="?id=3p9NlQnUo3vUY3nN4eqxsdPqLc8aT6gX3DS6uf8VnT1Z4">Project4</a></td> <td>£64,493</td> <td>£0</td> <td>£64,493</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> </tr> <tr> <td>REG</td> <td>value2</td> <td><a href="?id=dmb2fV8ZSxrv8m3TXEGebp2ZGwHR1CAJcRY8KI7rFstDR">Project4</a></td> <td>£46,000</td> <td>£46,000</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> </tr> <tr> <td>REG</td> <td>value1</td> <td><a href="?id=Im7h4ZzDqiwTumaNoeu4UnRbG7mZp0wuaViVatY01jZYs">RETAINER576666</a></td> <td>£19,500</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£0</td> <td>£19,500</td> <td>£0</td> </tr> </tbody> <tfoot> <tr> <th>Type</th> <th>Client</th> <th>Project</th> <th>Total</th> <th>Nov 2020</th> <th>Dec 2020</th> <th>Jan 2021</th> <th>Feb 2021</th> <th>Mar 2021</th> <th>Apr 2021</th> <th>May 2021</th> <th>Jun 2021</th> <th>Jul 2021</th> <th>Aug 2021</th> <th>Sep 2021</th> <th>Oct 2021</th> </tr> <tr> <td> </td> <td> </td> <td> </td> <td><b>Total</b></td> <td><b>£419,316</b></td> <td><b>£333,830</b></td> <td><b>£138,917</b></td> <td><b>£37,845</b></td> <td><b>£96,901</b></td> <td><b>£77,612</b></td> <td><b>£241,873</b></td> <td><b>£249,312</b></td> <td><b>£154,628</b></td> <td><b>£160,294</b></td> <td><b>£136,566</b></td> <td><b>£144,838</b></td> </tr> </tfoot></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() { var collapsedGroups = {}; var table = $('#example').DataTable({ order: [[0, 'asc']], rowGroup: { // Uses the 'row group' plugin dataSrc: 0, startRender: function (rows, group) { var collapsed = !!collapsedGroups[group]; rows.nodes().each(function (r) { r.style.display = collapsed ? 'none' : ''; }); // Add category name to the <tr>. NOTE: Hardcoded colspan return $('<tr/>') .append('<td colspan="17">' + group + ' (' + rows.count() + ')</td>') .attr('data-name', group) .toggleClass('collapsed', collapsed); } }, "bLengthChange": false, orderCellsTop: true, "bPaginate": false, responsive: true, scrollY: 800, scrollX: true, scrollCollapse: true, paging: false, fixedColumns: { leftColumns: 6, //rightColumns: 1 }, 'columnDefs' : [ //hide the second & fourth column { 'visible': false, 'targets': [2] } ] }); $('#example tbody').on('click', 'tr.group-start', function () { var name = $(this).data('name'); collapsedGroups[name] = !collapsedGroups[name]; table.draw(false); }); });
300px
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. | |