File
Login or Register via GitHub
<html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css"> <link href="https://nightly.datatables.net/css/dataTables.dataTables.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <link href="https://nightly.datatables.net/css/dataTables.dataTables.css" rel="stylesheet" type="text/css" /> <script src="https://nightly.datatables.net/js/dataTables.js"></script> <meta charset=utf-8 /> <title>DataTables - JS Bin</title> </head> <body> <div class="container"> <div class="table-responsive"> <table id="projectTable" class="table table-bordered table-striped"> <thead> <tr> <th width="15%" colspan="1" data-dt-order="disable"></th> <th width="15%" colspan="1" data-dt-order="disable"></th> <th colspan="10" class="text-center" data-dt-order="disable"> 2025 </th> <!-- Merged Year Header --> <th colspan="2" class="text-center" data-dt-order="disable"> 2026 </th> <!-- Merged Year Header --> <th colspan="2" class="text-center" data-dt-order="disable"> 2027 </th> <!-- Merged Year Header --> <th colspan="2" data-dt-order="disable"> </th> </tr> <tr> <th colspan="1" data-dt-order="disable"></th> <th colspan="1" data-dt-order="disable"></th> <!-- For 2025, display Q1, Q2, Q3, Q4 --> <th colspan="2" data-dt-order="disable">Q1</th> <th colspan="2" data-dt-order="disable">Q2</th> <th colspan="2" data-dt-order="disable">Q3</th> <th colspan="2" data-dt-order="disable">Q4</th> <th colspan="2" data-dt-order="disable">Total</th> <!-- For 2026 and 2027, only display Total --> <th colspan="2" data-dt-order="disable">Total</th> <!-- For 2026 and 2027, only display Total --> <th colspan="2" data-dt-order="disable">Total</th> <th colspan="2" data-dt-order="disable"> Overall Total</th> </tr> <tr> <th width="15%" colspan="1">Status</th> <th width="15%" colspan="1" style="text-align:center;"></th> <!-- For 2025, show Actual and Target for each quarter --> <th>Actual</th> <th>Target</th> <th>Actual</th> <th>Target</th> <th>Actual</th> <th>Target</th> <th>Actual</th> <th>Target</th> <th>Forecast</th> <th>Target</th> <!-- For 2026 and 2027, only show Forecast and Target --> <th colspan="2" data-dt-order="disable"></th> <!-- For 2026 and 2027, only show Forecast and Target --> <th colspan="2" data-dt-order="disable"></th> <th data-dt-order="disable"></th> </tr> </thead> <tbody> <tr> <td> <span class="badge bg-success circle-badge-success"></span> </td> <td>Metamorphosis</td> <!-- Dynamic Yearly Data --> <!-- For 2025, display Q1, Q2, Q3, Q4 --> <td>29.00</td> <td>30.00</td> <td>48.00</td> <td>43.00</td> <td>0</td> <td>2.00</td> <td>0</td> <td>9.00</td> <!-- Total Forecast and Target for each year --> <td>77.00</td> <td style="border-right: 1px solid #dee2e6;">84.00</td> <!-- For 2026 and 2027, only display Total --> <td colspan="2"> <button class="btn btn-link" data-year="2026" type="button">97.00</button> </td> <!-- For 2026 and 2027, only display Total --> <td colspan="2"> <button class="btn btn-link" data-year="2027" type="button">97.00</button> </td> <td>271.00</td> <td> Growth </td> </tr> <tr> <td> <span class="badge bg-warning circle-badge-warning"></span> </td> <td>Ignite</td> <!-- Dynamic Yearly Data --> <!-- For 2025, display Q1, Q2, Q3, Q4 --> <td>29.00</td> <td>30.00</td> <td>48.00</td> <td>43.00</td> <td>0</td> <td>2.00</td> <td>0</td> <td>9.00</td> <!-- Total Forecast and Target for each year --> <td>77.00</td> <td style="border-right: 1px solid #dee2e6;">84.00</td> <!-- For 2026 and 2027, only display Total --> <td colspan="2"> <button class="btn btn-link" data-year="2026" type="button">97.00</button> </td> <!-- For 2026 and 2027, only display Total --> <td colspan="2"> <button class="btn btn-link" data-year="2027" type="button">97.00</button> </td> <td>271.00</td> <td> Growth </td> </tr> <tr> <td> <span class="badge bg-danger circle-badge-danger"></span> </td> <td>Phoenix</td> <!-- Dynamic Yearly Data --> <!-- For 2025, display Q1, Q2, Q3, Q4 --> <td>29.00</td> <td>30.00</td> <td>48.00</td> <td>43.00</td> <td>0</td> <td>2.00</td> <td>0</td> <td>9.00</td> <!-- Total Forecast and Target for each year --> <td>77.00</td> <td style="border-right: 1px solid #dee2e6;">84.00</td> <!-- For 2026 and 2027, only display Total --> <td colspan="2"> <button class="btn btn-link" data-year="2026" type="button">97.00</button> </td> <!-- For 2026 and 2027, only display Total --> <td colspan="2"> <button class="btn btn-link" data-year="2027" type="button">97.00</button> </td> <td>271.00</td> <td> Growth </td> </tr> <tr> <td> <span class="badge bg-success circle-badge-success"></span> </td> <td>Elevate</td> <!-- Dynamic Yearly Data --> <!-- For 2025, display Q1, Q2, Q3, Q4 --> <td>29.00</td> <td>30.00</td> <td>48.00</td> <td>43.00</td> <td>0</td> <td>2.00</td> <td>0</td> <td>9.00</td> <!-- Total Forecast and Target for each year --> <td>77.00</td> <td style="border-right: 1px solid #dee2e6;">84.00</td> <!-- For 2026 and 2027, only display Total --> <td colspan="2"> <button class="btn btn-link" data-year="2026" type="button">97.00</button> </td> <!-- For 2026 and 2027, only display Total --> <td colspan="2"> <button class="btn btn-link" data-year="2027" type="button">97.00</button> </td> <td>271.00</td> <td> COGS </td> </tr> <tr> <td> <span class="badge bg-warning circle-badge-warning"></span> </td> <td>Evolve</td> <!-- Dynamic Yearly Data --> <!-- For 2025, display Q1, Q2, Q3, Q4 --> <td>29.00</td> <td>30.00</td> <td>48.00</td> <td>43.00</td> <td>0</td> <td>2.00</td> <td>0</td> <td>9.00</td> <!-- Total Forecast and Target for each year --> <td>77.00</td> <td style="border-right: 1px solid #dee2e6;">84.00</td> <!-- For 2026 and 2027, only display Total --> <td colspan="2"> <button class="btn btn-link" data-year="2026" type="button">97.00</button> </td> <!-- For 2026 and 2027, only display Total --> <td colspan="2"> <button class="btn btn-link" data-year="2027" type="button">97.00</button> </td> <td>271.00</td> <td> COGS </td> </tr> <tr> <td> <span class="badge bg-danger circle-badge-danger"></span> </td> <td>Serve</td> <!-- Dynamic Yearly Data --> <!-- For 2025, display Q1, Q2, Q3, Q4 --> <td>29.00</td> <td>30.00</td> <td>48.00</td> <td>43.00</td> <td>0</td> <td>2.00</td> <td>0</td> <td>9.00</td> <!-- Total Forecast and Target for each year --> <td>77.00</td> <td style="border-right: 1px solid #dee2e6;">84.00</td> <!-- For 2026 and 2027, only display Total --> <td colspan="2"> <button class="btn btn-link" data-year="2026" type="button">97.00</button> </td> <!-- For 2026 and 2027, only display Total --> <td colspan="2"> <button class="btn btn-link" data-year="2027" type="button">97.00</button> </td> <td>271.00</td> <td> COGS </td> </tr> <tr> <td> <span class="badge bg-success circle-badge-success"></span> </td> <td>Zion</td> <!-- Dynamic Yearly Data --> <!-- For 2025, display Q1, Q2, Q3, Q4 --> <td>29.00</td> <td>30.00</td> <td>48.00</td> <td>43.00</td> <td>0</td> <td>2.00</td> <td>0</td> <td>9.00</td> <!-- Total Forecast and Target for each year --> <td>77.00</td> <td style="border-right: 1px solid #dee2e6;">84.00</td> <!-- For 2026 and 2027, only display Total --> <td colspan="2"> <button class="btn btn-link" data-year="2026" type="button">97.00</button> </td> <!-- For 2026 and 2027, only display Total --> <td colspan="2"> <button class="btn btn-link" data-year="2027" type="button">97.00</button> </td> <td>271.00</td> <td> GBS </td> </tr> <tr> <td> <span class="badge bg-warning circle-badge-warning"></span> </td> <td>Triumph</td> <!-- Dynamic Yearly Data --> <!-- For 2025, display Q1, Q2, Q3, Q4 --> <td>29.00</td> <td>30.00</td> <td>48.00</td> <td>43.00</td> <td>0</td> <td>2.00</td> <td>0</td> <td>9.00</td> <!-- Total Forecast and Target for each year --> <td>77.00</td> <td style="border-right: 1px solid #dee2e6;">84.00</td> <!-- For 2026 and 2027, only display Total --> <td colspan="2"> <button class="btn btn-link" data-year="2026" type="button">97.00</button> </td> <!-- For 2026 and 2027, only display Total --> <td colspan="2"> <button class="btn btn-link" data-year="2027" type="button">97.00</button> </td> <td>271.00</td> <td> GBS </td> </tr> <tr> <td> <span class="badge bg-danger circle-badge-danger"></span> </td> <td>Thrive</td> <!-- Dynamic Yearly Data --> <!-- For 2025, display Q1, Q2, Q3, Q4 --> <td>29.00</td> <td>30.00</td> <td>48.00</td> <td>43.00</td> <td>0</td> <td>2.00</td> <td>0</td> <td>9.00</td> <!-- Total Forecast and Target for each year --> <td>77.00</td> <td style="border-right: 1px solid #dee2e6;">84.00</td> <!-- For 2026 and 2027, only display Total --> <td colspan="2"> <button class="btn btn-link" data-year="2026" type="button">97.00</button> </td> <!-- For 2026 and 2027, only display Total --> <td colspan="2"> <button class="btn btn-link" data-year="2027" type="button">97.00</button> </td> <td>271.00</td> <td> GBS </td> </tr> </tbody> </table> </div> </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;}.circle-badge { width: 20px; /* Set width of the circle */ height: 20px; /* Set height of the circle */ border-radius: 50%; /* Make it a perfect circle */ display: inline-block; /* Ensure it's displayed inline */ background-color: #28a745; /* Use success color (green) */ } .circle-badge-info { width: 20px; /* Set width of the circle */ height: 20px; /* Set height of the circle */ border-radius: 50%; /* Make it a perfect circle */ display: inline-block !important; /* Ensure it's displayed inline */ background-color: #2cbacc; /* Use success color (green) */ } .circle-badge-success { width: 20px; /* Set width of the circle */ height: 20px; /* Set height of the circle */ border-radius: 50%; /* Make it a perfect circle */ display: inline-block !important; /* Ensure it's displayed inline */ background-color: #28a745; /* Use success color (green) */ } .circle-badge-warning { width: 20px; /* Set width of the circle */ height: 20px; /* Set height of the circle */ border-radius: 50%; /* Make it a perfect circle */ display: inline-block !important; /* Ensure it's displayed inline */ background-color: #f58646; /* Use success color (green) */ } .circle-badge-danger { width: 20px; /* Set width of the circle */ height: 20px; /* Set height of the circle */ border-radius: 50%; /* Make it a perfect circle */ display: inline-block !important; /* Ensure it's displayed inline */ background-color: #ef5350; /* Use success color (green) */ } var groupColumn = 15; $(document).ready(function () { var table = $('#projectTable').DataTable({ columnDefs: [ { visible: false, targets: groupColumn } ], destroy: true, pageLength: 50, dom: 'Bfrtip', autoWidth: false, buttons: { dom: { button: { className: 'dt-button button-page-length btn btn-secondary' } }, buttons: [ { extend: 'excelHtml5', className: 'btn btn-secondary', exportOptions: { columns: [8, 0, 1, 2, 3, 4, 5, 6, 7] }, title: "", filename: "All IT Portfolio" }, 'pageLength' ] }, "order": [[groupColumn, "asc"]], "oLanguage": { "sEmptyTable": "No data available." }, "drawCallback": function (settings) { var api = this.api(); var rows = api.rows({ page: 'current' }).nodes(); var last = null; var className = "enhance-business"; api.column(groupColumn, { page: 'current' }).data().each(function (group, i) { if (last !== group) { $(rows).eq(i).before( '<tr class="group"><td colspan="100%" id="clmBusinessUnit" style="font-weight: bold;padding:4px!important;" class=' + className + '>' + group + '</td></tr>' ); last = group; } }); } }); $(".dataTables_length select").addClass('form-select form-select-sm'); });
This bin was created anonymously and its free preview time has expired. Get a free unrestricted account
Dismiss x| 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. | |