File
Login or Register via GitHub
<html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-2.1.8/b-3.2.0/b-colvis-3.2.0/b-html5-3.2.0/b-print-3.2.0/cr-2.0.4/date-1.5.4/fc-5.0.4/fh-4.0.1/r-3.0.3/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.1/sp-2.3.3/sl-2.1.0/datatables.min.css" rel="stylesheet"> <meta charset=utf-8 /> <title>DataTables - JS Bin</title> </head> <body> <div class="container"> <div class="row"> <div class="col-12"> <div class="table-responsive"> <table class="table table-striped table-bordered align-middle text-nowrap" id="translations-table" data-lh-pl="datatable" data-lh-pl-options=" paging: true, ordering: true, info: true, searching: true, autoWidth: true, scrollContainer: false, scrollX: true, scrollY: true, leftColumns: false, rightColumns: false, dom: true, responsive: true, buttons: true, iDisplayLength: 10"> <thead> <tr> <th> </th> <th>{{key-column}}</th> <th>{{status}}</th> <th>{{priority}}</th> <th>{{translate}}</th> <th>{{report}}</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> <th>test</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority}}</td> <td>{{c-translate}}</td> <td> <button type="button" class="btn btn-xs btn-warning" name="test">{{c-report}}</button> </td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>2</td> <td>{{c-key}}</td> <td> <select class="form-select form-select-sm py-0 px-1" data-lh-pl="select-dt" data-width="100%" data-lh-pl-options="minimumResultsForSearch: Infinity, size:tb"> <option value="en">English</option> <option value="es" selected>Español</option> <option value="fr">Français</option> <option value="pt">Português</option> </select> </td> <td>{{c-priority}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>3</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>4</td> <td>{{c-key}}</td> <td>{{c-status4}}</td> <td>{{c-priority}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>5</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority}}</td> <td>{{c-translate}}</td> <td>{{c-report}} <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>6</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority4}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>7</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority}}</td> <td>{{c-translate4}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>8</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>9</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority4}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>10</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority4}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>11</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>12</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority4}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>13</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority4}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>14</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>15</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>16</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority4}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>17</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority4}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>18</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>19</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority4}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>20</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority4}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>21</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>22</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>23</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>24</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>25</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>26</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority}}</td> <td>{{c-translate}}</td> <td> <button type="button" class="btn btn-xs btn-warning" name="test">{{c-report}}</button> </td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>27</td> <td>{{c-key}}</td> <td>{{c-status}}</td> <td>{{c-priority}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> <tr> <td>28</td> <td>{{c-key}}</td> <td> <select class="form-select form-select-sm py-0 px-1" data-lh-pl="select-dt" data-width="100%" data-lh-pl-options="minimumResultsForSearch: Infinity, size:tb"> <option value="en">English</option> <option value="es" selected>Español</option> <option value="fr">Français</option> <option value="pt">Português</option> </select> </td> <td>{{c-priority}}</td> <td>{{c-translate}}</td> <td>{{c-report}}</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> </tbody> </table> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script> <script src="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-2.1.8/b-3.2.0/b-colvis-3.2.0/b-html5-3.2.0/b-print-3.2.0/cr-2.0.4/date-1.5.4/fc-5.0.4/fh-4.0.1/r-3.0.3/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.1/sp-2.3.3/sl-2.1.0/datatables.min.js"></script> </body></html>body { font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; color: #333; background-color: #fff;}export class HandlerPlugin { getPlOptions(options) { return options.split(',').reduce((obj, par) => { const [key, value] = par.split(':').map(element => element.trim()); obj[key] = value; return obj; }, {}); } handlerDatatable(elements) { //await this.resources.loadAssets('select2'); const tableConfig = { getDatatableConfig: (target) => ({ target: $(target), options: target.getAttribute("data-lh-pl-options") || false, }), getDefaultConfig: () => ({ paging: false, ordering: false, info: false, searching: false, autoWidth: false, scrollContainer: false, scrollX: false, scrollY: false, fixedColumns: { leftColumns: false, rightColumns: false, }, colReorder: false, dom: false, buttons: false, iDisplayLength: -1, language: { decimal: '.', thousands: ',', emptyTable: '<i class="fa-solid fa-comment-slash"></i>'.repeat(3), info: '_START_ <i class="fa-solid fa-arrow-right"></i> _END_ || _TOTAL_', infoEmpty: '0 <i class="fa-solid fa-arrow-right"></i> 0 || 0', infoFiltered: ' [ T: _MAX_ ]', infoPostFix: "", lengthMenu: "_MENU_", loadingRecords: '<i class="fa-solid fa-arrow-right"></i>'.repeat(2) + ' ...', processing: '<i class="fa-solid fa-arrow-right"></i>'.repeat(2) + ' ...', search: '<i class="fa-solid fa-magnifying-glass"></i>', searchPlaceholder: '', zeroRecords: "---", paginate: { first: '<i class="fa-solid fa-angles-left"></i>', previous: '<i class="fas fa-chevron-left"></i>', next: '<i class="fas fa-chevron-right"></i>', last: '<i class="fa-solid fa-angles-right"></i>' } }, lengthMenu: [ [5, 10, 25, 50, 100, 250, 500, 1000, -1], [5, 10, 25, 50, 100, 250, 500, 1000, "∞"] ], initComplete: function (settings) { const api = new $.fn.dataTable.Api(settings); api.page('last').draw('page'); }, drawCallback: function (settings) { const api = new $.fn.dataTable.Api(settings); const handlerPlugin = new HandlerPlugin(); const table = $(this); const jqueryElements = table.find('select[data-lh-pl="select-dt"]'); const nativeElements = jqueryElements.get(); if (nativeElements.length > 0) { //handlerPlugin.handlerSelect2(nativeElements); not in example } } }), createExportModal: (type, e, dt, node, config, cb) => { const modalConfig = HandlerModal.initModal(); modalConfig.title = `Export to ${type}`; modalConfig.content = ` <div class="form-group"> <label for="filename" class="form-label">Filename</label> <input type="text" class="form-control" id="filename" value="export"> </div>`; const exportConfig = { pdf: { action: 'pdfHtml5', extraConfig: { orientation: 'landscape', pageSize: 'LETTER', customize: function (doc) { doc.defaultStyle.fontSize = 8; doc.styles.tableHeader.fontSize = 9; doc.styles.tableHeader.alignment = 'left'; doc.content[1].table.widths = Array(doc.content[1].table.body[0].length + 1).join('*').split(''); } } }, excel: { action: 'excelHtml5', extraConfig: {} } }; modalConfig.footerButtons = [ { text: 'Export', class: 'btn-primary', onClick: () => { const filename = document.getElementById('filename').value || 'export'; const exportType = exportConfig[type.toLowerCase()]; $.fn.dataTable.ext.buttons[exportType.action].action.call( this, e, dt, node, { config, filename: filename, exportType.extraConfig, exportOptions: { columns: ':visible' } }, cb ); bootstrap.Modal.getInstance(document.querySelector('.modal.show')).hide(); } }, { text: 'Cancel', class: 'btn-secondary', onClick: () => { bootstrap.Modal.getInstance(document.querySelector('.modal.show')).hide(); } } ]; HandlerModal.createModal(modalConfig); }, getButtons: function () { return [{ extend: 'collection', text: '<i class="fas fa-cog"></i>', className: 'btn btn-sm btn-info d-flex align-items-center', collectionLayout: 'three-column', autoClose: true, buttons: [ { extend: 'copyHtml5', text: '<i class="fas fa-copy"></i>', className: 'btn fs-4 text-center table-export-element', exportOptions: {columns: ':visible'} }, { extend: 'print', text: '<i class="fas fa-print"></i>', className: 'btn fs-4 text-center table-export-element', exportOptions: {columns: ':visible'} }, { extend: 'pdfHtml5', text: '<i class="fa-solid fa-file-pdf"></i>', className: 'btn fs-4 text-center table-export-element', action: function (e, dt, node, config, cb) { tableConfig.createExportModal('PDF', e, dt, node, config, cb); } }, { extend: 'colvis', text: '<i class="fas fa-eye-slash"></i>', className: 'btn fs-4 text-center table-export-element', }, { extend: 'excelHtml5', text: '<i class="fas fa-file-excel"></i>', className: 'btn fs-4 text-center table-export-element', action: function (e, dt, node, config, cb) { tableConfig.createExportModal('Excel', e, dt, node, config, cb); } }, { text: '<i class="fas fa-question-circle"></i>', className: 'btn fs-4 text-center table-export-element', action: function (e, dt, node, config) { // Implement help action } } ] }]; }, getDomLayout: () => ( '<"d-flex justify-content-between align-items-center mb-1"' + '<"d-flex align-items-center"l<"html5buttons d-flex flex-row"B>>f>' + 'rt' + '<"d-flex flex-column flex-sm-row justify-content-between align-items-center gap-2"ip>' ), parseOptions: (options, baseOptions) => { if (!options) return baseOptions; const optionsObj = this.getPlOptions(options); Object.entries(optionsObj).forEach(([key, value]) => { if (key === 'dom') { baseOptions[key] = tableConfig.getDomLayout(); } else if (key === 'buttons' && value === 'true') { baseOptions[key] = tableConfig.getButtons(); } else { baseOptions[key] = value === 'true' ? true : value === 'false' ? false : !isNaN(value) ? Number(value) : value; } }); return baseOptions; }, setupEventHandlers: (datatable) => { datatable.on('draw.dt', function () { const info = datatable.page.info(); $(datatable.table().container()).trigger('datatable:update', { page: info.page + 1, pages: info.pages, recordsTotal: info.recordsTotal }); }); } }; const initializeDatatable = (element) => { const config = tableConfig.getDatatableConfig(element); const baseOptions = tableConfig.getDefaultConfig(); const options = tableConfig.parseOptions(config.options, baseOptions); const datatable = config.target.DataTable(options); tableConfig.setupEventHandlers(datatable); return datatable; }; elements.forEach(initializeDatatable); }}const elements = document.querySelectorAll('[data-lh-pl="datatable"]');HandlerPlugin.handlerDatatable(elements);
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. | |