File
Login or Register via GitHub
<html> <head> <!-- Styles for the filter --> <link href="https://cdn.datatables.net/searchpanes/1.4.0/css/searchPanes.dataTables.min.css" rel="stylesheet"> <link href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css" rel="stylesheet"/> <!-- Styles for the column visibility and buttons --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css"/> <!-- Core JQuery --> <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Bootstrap core JS--> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <!-- JavaScript for filters --> <script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script> <!-- Unstable version: Use latest stable version after 2.0.0. --> <script type="text/javascript" src="https://nightly.datatables.net/searchpanes/js/dataTables.searchPanes.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/select/1.3.4/js/dataTables.select.min.js"></script> <!-- JavaScript for column visibility --> <script src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script> <script src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.colVis.min.js"></script> <!-- JavaScript for truncate data --> <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.24/dataRender/ellipsis.js"></script> <!-- JavaScript for excel, pdf, and print buttons--> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script> <!-- JavaScript for date buttons --> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.16.0/moment.min.js"></script> <meta charset=utf-8 /> <title>DataTables - JS Bin</title> </head> <body> <div class="container"> <button id ="allButton" class="collapsible filter-caret filter-btn" type="button"> <h6>Advanced filters</h6> </button> <table id="all-lessons" class="display nowrap" width="100%"> <thead> <tr> <th>Lesson number</th> <th>Lesson name</th> <th>Recommendation</th> <th>When to consider</th> <th>Lesson category</th> <th>Applicable project type</th> <th>Applicable SW class</th> <th>Applicable SW criticality</th> <th>Applicable SW project size</th> <th>Applicable to new or maintenance</th> <th>Applicable provider type</th> <th>Org changes</th> <th>Project name</th> <th>Mission name</th> <th>Organization</th> <th>What happened</th> <th>Response action</th> <th>Lesson take away</th> <th>Phase or activity</th> <th>Project changes</th> <th>Submitted by</th> <th>Date</th> <th>Collection event</th> <th>Status</th> <th>Likes</th> <th>Tags</th> <th>My favorites</th> <th>Lesson URL</th> <th>My favorites</th> <th>Lesson URL</th> </tr> </thead><tbody> <tr> <td>id</td> <td>lesson_title</td> <td title="{{ l.recommendation }}">recommendation</td> <td>get_when_to_consider</td> <td>Technical</td> <td>flight</td> <td>get_sw_class</td> <td>get_sw_criticality</td> <td>get_project_size</td> <td>project.get_newness</td> <td>project.get_provider_type</td> <td title="{{ l.org_changes }}">org_changes</td> <td title="{{ l.project }}">project</td> <td title="{{ l.lesson_mission }}">lesson_mission</td> <td>get_project_organizatio</td> <td title="{{ l.context }}">.context</td> <td title="{{ l.response_action }}">response_action</td> <td title="{{ l.summary }}">summary</td> <td title="{{ l.phase_or_activity }}">phase_or_activity</td> <td title="{{ l.project_changes }}">project_changes</td> <td>submitted_by</td> <td>date</td> <td title="{{ l.source }}">source</td> <td>get_lesson_status</td> <td>likes</td> <td>tags</td> <td>True</td> <td>tags</td> <td>True</td> <td>https://software-dev.gsfc.nasa.gov/lesson-details/</td> </tr> <tr> <td>id</td> <td>lesson_title</td> <td title="{{ l.recommendation }}">recommendation</td> <td>other options</td> <td>Testing</td> <td>ground</td> <td>get_sw_class</td> <td>get_sw_criticality</td> <td>other option</td> <td>project.get_newness</td> <td>project.get_provider_type</td> <td title="{{ l.org_changes }}">org_changes</td> <td title="{{ l.project }}">project</td> <td title="{{ l.lesson_mission }}">lesson_mission</td> <td>get_project_organizatio</td> <td title="{{ l.context }}">.context</td> <td title="{{ l.response_action }}">response_action</td> <td title="{{ l.summary }}">summary</td> <td title="{{ l.phase_or_activity }}">phase_or_activity</td> <td title="{{ l.project_changes }}">project_changes</td> <td>submitted_by</td> <td>date</td> <td title="{{ l.source }}">source</td> <td>get_lesson_status</td> <td>likes</td> <td>tags</td> <td>likes</td> <td>tags</td> <td> True </td> <td>https://software-dev.gsfc.nasa.gov/lesson-details/</td> </tr> </tbody> </table> </div> </body></html> // Filter for project size $(document).ready(function() { //Select by date buttons variable //Reference: https://jsfiddle.net/8az24y3k/ var rangeSearch = ''; var favoriteSearch = ''; var dateSearch = ''; var lessonsSearch = ''; var nameSearch = ''; $.fn.dataTable.ext.search.push( function(settings, data, dataIndex) { if (rangeSearch === '') { return true; } var colDate = moment(data[21]); return colDate >= rangeSearch; }); // Shows number of results for When to consider filter //Reference: http://live.datatables.net/kuvavapu/1/edit // This function is going to decide what goes into our pill on the right of the row var getMessage = function(row, col) { // To do this we need a... // ... dt instance... var dt = $('#all-lessons').DataTable(); // ... and all of the searchpanes var panes = dt.searchPanes().context[0]._searchPanes.s.panes; // This variable is to determine whether filtering is active for this pane // Normally SearchPanes would just do this.s.filteringActive, but we don't have a reference to that here // So we have to dig in a bit to find it var filteringActive = false; for(var i = 0; i < panes.length; i++) { // The column index is stored in searchpanes so we have to find the matching one like this if(panes[i].s.index === col) { // Then can use that panes filteringActive property filteringActive = panes[i].s.filteringActive; break; } } // Message if filtering is not active for this pane var countMessage = dt.i18n('searchPanes.count', '{total}'); // Message if filtering is active for this pane var filteredMessage = dt.i18n('searchPanes.countFiltered', '{shown} ({total})'); // Replace and return based on filtering active return (filteringActive ? filteredMessage : countMessage) .replace(/{total}/g, row.total) .replace(/{shown}/g, row.shown); }; var dt_all = $('#all-lessons').DataTable({ // Reference: https://datatables.net/examples/basic_init/table_sorting.html "order": [[ 21, "desc" ]], "scrollX": true, "language": { "search": "Search:", searchPanes: { title: { _: 'Active - %d', }, count: '{total}', countFiltered: '{shown}' } }, pagingType: "full_numbers", pageLength: 25, dom:'<"myfilter"f><"mylength"l>Btip<"bottom"l>', // Need this for column width to work "autoWidth": false, // stateSave restores table state on page reload, works when user closes browser as well // https://datatables.net/reference/option/stateSave stateSave: true, "stateSaveParams": function (settings, data) { //save toggle state for searchpanes data.sp_hidden = $('#allspCont').hasClass('hide-allsp'); // Save rangesSearch data.rangeSearch = rangeSearch; data.favoriteSearch = favoriteSearch; data.dateSearch = dateSearch; data.lessonsSearch = lessonsSearch; data.nameSearch = nameSearch; }, "stateLoadParams": function (settings, data) { // Load rangeSearch rangeSearch = data.rangeSearch; favoriteSearch = data.favoriteSearch; dateSearch = data.dateSearch; lessonsSearch = data.lessonsSearch; nameSearch = data.nameSearch; // Make sure its a timestamp if (rangeSearch) { // Convert to moment object rangeSearch = moment(rangeSearch); } }, initComplete: function () { this.api().draw(); //Reference: https://stackoverflow.com/questions/15565632/additional-scroll-bar-below-the-header-of-jquery-datatable // Enable THEAD scroll bars $('.dataTables_scrollHead').css('overflow', 'auto'); // Sync THEAD scrolling with TBODY $('.dataTables_scrollHead').on('scroll', function() { $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft()); }); var z = $("div.dt-buttons").find(".dt-button"); z.removeClass('dt-button'); z.addClass("ll-table-btn"); }, columns: [ { data: 'id'}, { data: 'lesson_name'}, { data: 'recommendation'}, { data: 'consider'}, { data: 'category'}, { data: 'project_type'}, { data: 'class'}, { data: 'criticality'}, { data: 'project_size'}, { data: 'new_maintenance'}, { data: 'provider_type'}, { data: 'org_changes'}, { data: 'project_name'}, { data: 'mission_name'}, { data: 'organization'}, { data: 'happened'}, { data: 'action'}, { data: 'take_away'}, { data: 'phase_activity'}, { data: 'project_changes'}, { data: 'submitted_by'}, { data: 'date'}, { data: 'event'}, { data: 'status'}, { data: 'likes'}, { data: 'tags'}, { data: 'favorites'}, { data: 'url'}, { data: 'submitted_on'}, { data: 'submitted_by'}, ], // Does not work with searchPanes 2.0.0. and nightly //colReorder: true, columnDefs: [ { searchPanes:{ show: false, // It can be true/false }, targets: ['_all'], }, // hide column 26 from column visbility // Reference: https://datatables.net/extensions/buttons/examples/column_visibility/columns.html { targets: 26, className: 'noVis' }, { targets: 27, className: 'noVis' }, { type: 'date', targets: [21], }, // column visibility - visible: false // truncate data - className:'truncate show_hide' // change width of columns here // Reference: https://datatables.net/forums/discussion/comment/205474#Comment_205474 { "width": "50px", "targets": 0, visible: false }, { "width": "250px", "targets": 1 }, { "width": "650px", "targets": 2, className:'truncate show_hide' }, { "width": "150px", "targets": 3 }, { "width": "100px", "targets": 4 }, { "width": "100px", "targets": 5 }, { "width": "100px", "targets": 6 }, { "width": "100px", "targets": 7 }, { "width": "100px", "targets": 8 }, { "width": "150px", "targets": 9 }, { "width": "100px", "targets": 10 }, { "width": "100px", "targets": 11, visible: false, className:'truncate show_hide' }, { "width": "300px", "targets": 12, visible: false }, { "width": "100px", "targets": 13, visible: false, className:'truncate show_hide' }, { "width": "200px", "targets": 14, visible: false }, { "width": "100px", "targets": 15, visible: false, className:'truncate show_hide' }, { "width": "200px", "targets": 16, visible: false, className:'truncate show_hide' }, { "width": "150px", "targets": 17, visible: false, className:'truncate show_hide' }, { "width": "100px", "targets": 18, visible: false, className:'truncate show_hide' }, { "width": "100px", "targets": 19, visible: false, className:'truncate show_hide' }, { "width": "100px", "targets": 20, visible: false }, { "width": "100px", "targets": 21}, { "width": "100px", "targets": 22, visible: false, className:'truncate show_hide' }, { "width": "100px", "targets": 23, visible: false }, { "width": "100px", "targets": 24}, { "width": "100px", "targets": 25, visible: false }, { "width": "100px", "targets": 26, visible: false }, { "width": "100px", "targets": 27, visible: false }, { "width": "100px", "targets": 28, visible: false }, { "width": "100px", "targets": 29, visible: false } ], searchPanes: { layout: 'columns-6', collapse: false, cascadePanes: true, viewTotal: true, panes: [{ targets: [3], name: 'when-to-consider', header: 'When to consider', show: true, // Reorder options for When to consider // Reference: https://stackoverflow.com/questions/67544225/how-to-specify-custom-order-of-options-in-searchpanes-for-datatables // Reference: https://datatables.net/forums/discussion/comment/205806#Comment_205806 dtOpts: { info: true, columnDefs: [ { targets: 0, type: 'num', render: function ( data, type, row, meta ) { if (type === 'sort') { switch(data) { case 'Project Startup': return 0; break; case 'Project Planning': return 1; break; case 'Software Requirements Engineering': return 2; break; case 'At SW SRR': return 3; break; case 'Design': return 4; break; case 'At SW PDR': return 5; break; case 'At SW CDR': return 6; break; case 'Coding and Integration': return 7; break; case 'Software Verification and Validation': return 8; break; case 'Product Release and Transition': return 9; break; case 'Sustaining Engineering and Maintenance': return 10; break; case 'Throughout the project': return 11; break; } } else if (type === 'type') { return row.type; } // Shows number of results for When to consider filter //Reference: http://live.datatables.net/kuvavapu/1/edit // If not a type or a sort we are going to add the pill // Calling our function defined above var message = getMessage(row, 3); // We are displaying the count in the same columne as the name of the search option. // This is so that there is not need to call columns.adjust() // which in turn speeds up the code var pill = '<span class="dtsp-pill">' + message + '</span>'; if (type === 'filter') { return typeof data === 'string' && data.match(/<[^>]*>/) !== null ? data.replace(/<[^>]*>/g, '') : data; } return '<div class="dtsp-nameCont"><span title="' + (typeof data === 'string' && data.match(/<[^>]*>/) !== null ? data.replace(/<[^>]*>/g, '') : data) + '" class="dtsp-name">' + data + '</span>' + pill + '</div>'; } } ], }, options: [{ label: 'Project Startup', type: "checkbox", value: function(rowData, rowIdx) { return rowData.consider.includes("Project Startup"); } }, { label: 'Project Planning', type: "checkbox", value: function(rowData, rowIdx) { return rowData.consider.includes("Project Planning"); } }, { label: 'At SW SRR', type: "checkbox", value: function(rowData, rowIdx) { return rowData.consider.includes("At SW SRR"); } }, { label: 'Software Requirements Engineering', type: "checkbox", value: function(rowData, rowIdx) { return rowData.consider.includes("Software Requirements Engineering"); } }, { label: 'Design', type: "checkbox", value: function(rowData, rowIdx) { return rowData.consider.includes("Design"); } }, { label: 'Coding and Integration', type: "checkbox", value: function(rowData, rowIdx) { return rowData.consider.includes("Coding and Integration"); } }, { label: 'Software Verification and Validation', type: "checkbox", value: function(rowData, rowIdx) { return rowData.consider.includes("Software Verification and Validation"); } }, { label: 'Product Release and Transition', type: "checkbox", value: function(rowData, rowIdx) { return rowData.consider.includes("Product Release and Transition"); } }, { label: 'Sustaining Engineering and Maintenance', type: "checkbox", value: function(rowData, rowIdx) { return rowData.consider.includes("Sustaining Engineering and Maintenance"); } }, { label: 'At SW PDR', type: "checkbox", value: function(rowData, rowIdx) { return rowData.consider.includes("At SW PDR"); } }, { label: 'At SW CDR', type: "checkbox", value: function(rowData, rowIdx) { return rowData.consider.includes("At SW CDR"); } }, { label: 'Throughout the project', type: "checkbox", value: function(rowData, rowIdx) { return rowData.consider.includes("Throughout the project"); } }, ] }, { targets: [5], name: 'project-type', header: 'Project Type', show: true, options: [{ label: 'analysis/research', type: "checkbox", value: function(rowData, rowIdx) { return rowData.project_type.includes("analysis/research"); } }, { label: 'flight', type: "checkbox", value: function(rowData, rowIdx) { return rowData.project_type.includes("flight"); } }, { label: 'ground', type: "checkbox", value: function(rowData, rowIdx) { return rowData.project_type.includes("ground"); } }, { label: 'infrastructure', type: "checkbox", value: function(rowData, rowIdx) { return rowData.project_type.includes("infrastructure"); } }, { label: 'data processing', type: "checkbox", value: function(rowData, rowIdx) { return rowData.project_type.includes("data processing"); } }, { label: 'other', type: "checkbox", value: function(rowData, rowIdx) { return rowData.project_type.includes("other"); } }, ] }, { targets: [6], name: 'software-class', header: 'Software Class', show: true, options: [{ label: 'A', type: "checkbox", value: function(rowData, rowIdx) { return rowData.class.includes("A"); } }, { label: 'B', type: "checkbox", value: function(rowData, rowIdx) { return rowData.class.includes("B"); } }, { label: 'C', type: "checkbox", value: function(rowData, rowIdx) { return rowData.class.includes("C"); } }, { label: 'D', type: "checkbox", value: function(rowData, rowIdx) { return rowData.class.includes("D"); } }, { label: 'E', type: "checkbox", value: function(rowData, rowIdx) { return rowData.class.includes("E"); } }, { label: 'F', type: "checkbox", value: function(rowData, rowIdx) { return rowData.class.includes("F"); } }, ] }, { targets: [7], name: 'software-criticality', header: 'Software Criticality', show: true, options: [{ label: 'Safety Critical', type: "checkbox", value: function(rowData, rowIdx) { return rowData.criticality != "Not Safety Critical" && rowData.criticality.includes("Safety Critical"); } }, { label: 'Not Safety Critical', type: "checkbox", value: function(rowData, rowIdx) { return rowData.criticality.includes("Not Safety Critical") || rowData.criticality.includes("Not Safety Critical,"); } }, ] }, { name: 'project-size', header: 'Project Size', targets: [8], show: true, options: [{ label: 'Small', type: "checkbox", value: function(rowData, rowIdx) { return rowData.project_size.includes("Small"); } }, { label: 'Medium', value: function(rowData, rowIdx) { return rowData.project_size.includes("Medium"); } }, { label: 'Large', value: function(rowData, rowIdx) { return rowData.project_size.includes("Large"); } }, ] }, /* May need for future use { targets: [4], name: 'lesson-category', header: 'Lesson Category', show: true, options: [{ label: 'Management', type: "checkbox", value: function(rowData, rowIdx) { return rowData.category.includes("Management"); } }, { label: 'Technical', type: "checkbox", value: function(rowData, rowIdx) { return rowData.category.includes("Technical"); } }, { label: 'Testing', type: "checkbox", value: function(rowData, rowIdx) { return rowData.category.includes("Testing"); } }, { label: 'Training', type: "checkbox", value: function(rowData, rowIdx) { return rowData.category.includes("Training"); } }, { label: 'Tool', type: "checkbox", value: function(rowData, rowIdx) { return rowData.category.includes("Tool"); } }, ] }, */ { targets: [9], name: 'new-or-maintenance', header: 'New or Maintenance', show: true, options: [{ label: 'New', value: function(rowData, rowIdx) { return rowData.new_maintenance.includes("New"); } }, { label: 'Maintenance', value: function(rowData, rowIdx) { return rowData.new_maintenance.includes("Maintenance"); } }, ] }, ]}, // Toggle my favorites button // Reference: http://live.datatables.net/fihukiha/1/edit searchCols: [ null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, {targets: 26, search: "" }, {targets: 27, search: "" }, null, null ], buttons: [ { extend: 'collection', text: 'Select by date', className: 'dataTables_btn_margin', autoClose: true, name: 'date', buttons: [ { text: 'Past month', className: 'active:not', name: 'past-month', action: function ( e, dt, node, config ) { rangeSearch = moment().subtract(1, 'months'); dateSearch = 'past-month'; // Save the rangeSearch vlaue dt.state.save(); dt.draw(); dt.column(21).order('desc').draw(); this.active(!this.active()); $(".dt-buttons").find(".active").removeClass("active"); node.addClass("active"); dt.buttons(0).text('Past month'); } }, { text: 'Past 6 months', className: 'active:not', name: 'past-six', action: function ( e, dt, node, config ) { rangeSearch = moment().subtract(6, 'months'); dateSearch = 'past-six'; // Save the rangeSearch vlaue dt.state.save(); dt.draw(); dt.column(21).order('desc').draw(); this.active(!this.active()); $(".dt-buttons").find(".active").removeClass("active"); node.addClass("active"); dt.buttons(0).text('Past 6 months'); } }, { text: 'Past year', className: 'active:not', name: 'past-year', action: function ( e, dt, node, config ) { rangeSearch = moment().subtract(1, 'years'); dateSearch = 'past-year'; // Save the rangeSearch vlaue dt.state.save(); dt.draw(); dt.column(21).order('desc').draw(); this.active(true); this.active(!this.active()); $(".dt-buttons").find(".active").removeClass("active"); node.addClass("active"); dt.buttons(0).text('Past year'); } }, { text: 'All lessons', className: 'active:not', name: 'date-all', action: function ( e, dt, node, config ) { rangeSearch = ''; dateSearch = ''; // Save the rangeSearch vlaue dt.state.save(); dt.draw(); dt.column(21).order('desc').draw(); this.active(!this.active()); $(".dt-buttons").find(".active").removeClass("active"); node.addClass("active"); dt.buttons(0).text('Select by dates'); } } ] }, { extend: 'collection', text: 'Select my lessons', autoClose: true, name: 'my-lessons', buttons: [ { text: 'Submitted', className: 'active:not', name: 'submitted', action: function ( e, dt, node, config ) { lessonsSearch = 'Submitted'; nameSearch = '{{ user.first_name }} {{ user.last_name }}'; dt.state.save(); dt.column(23).search(lessonsSearch).draw(); dt.column(20).search(nameSearch).draw(); dt.column(21).order('desc').draw(); this.active(!this.active()); $(".dt-buttons").find(".active").removeClass("active"); node.addClass("active"); dt.buttons(1).text('Submitted'); } }, { text: 'In review', className: 'active:not', name: 'in-review', action: function ( e, dt, node, config ) { lessonsSearch = 'In review'; nameSearch = '{{ user.first_name }} {{ user.last_name }}'; dt.state.save(); dt.column(23).search(lessonsSearch).draw(); dt.column(20).search(nameSearch).draw(); dt.column(21).order('desc').draw(); this.active(!this.active()); $(".dt-buttons").find(".active").removeClass("active"); node.addClass("active"); dt.buttons(1).text('In review'); } }, { text: 'Reviewed', className: 'active:not', name: 'reviewed', action: function ( e, dt, node, config ) { lessonsSearch = 'Reviewed'; nameSearch = '{{ user.first_name }} {{ user.last_name }}'; dt.state.save(); dt.column(23).search(lessonsSearch).draw(); dt.column(20).search(nameSearch).draw(); dt.column(21).order('desc').draw(); this.active(!this.active()); $(".dt-buttons").find(".active").removeClass("active"); node.addClass("active"); dt.buttons(1).text('Reviewed'); } }, { text: 'All my lessons', className: 'active:not', name: 'my-all', action: function ( e, dt, node, config ) { lessonsSearch = ''; nameSearch = '{{ user.first_name }} {{ user.last_name }}'; dt.state.save(); dt.column(23).search(lessonsSearch).draw(); dt.column(20).search(nameSearch).draw(); dt.column(21).order('desc').draw(); this.active(!this.active()); $(".dt-buttons").find(".active").removeClass("active"); node.addClass("active"); dt.buttons(1).text('All my lessons'); } }, { text: 'All lessons', className: 'active:not', name: 'lessons-all', action: function ( e, dt, node, config ) { lessonsSearch = ''; nameSearch = ''; dt.state.save(); dt.column(23).search(lessonsSearch).draw(); dt.column(20).search(nameSearch).draw(); dt.column(21).order('desc').draw(); this.active(!this.active()); $(".dt-buttons").find(".active").removeClass("active"); node.addClass("active"); dt.buttons(1).text('Select my lessons'); } } ] }, { extend: 'collection', text: 'Select by likes', autoClose: true, name: 'by-favorites', buttons: [ { text: 'My likes', name: 'favorites', className: 'active:not', action: function ( e, dt, node, config ) { favoriteSearch = 'True'; dt.state.save(); dt.column(26).search(favoriteSearch).draw(); dt.column(21).order('desc').draw(); this.active(!this.active()); $(".dt-buttons").find(".active").removeClass("active"); node.addClass("active"); dt.buttons(2).text('My likes'); } }, { text: 'Popular', name: 'popular', className: 'active:not', action: function ( e, dt, node, config ) { favoriteSearch = '^(?!0)'; dt.state.save(); dt.column(26).search("").draw(); dt.column(24).search(favoriteSearch, true, false).draw(); dt.column(24).order('desc').draw(); this.active(!this.active()); $(".dt-buttons").find(".active").removeClass("active"); node.addClass("active"); dt.buttons(2).text('Popular'); } }, { text: 'All lessons', name: 'fav-all', className: 'active:not', action: function ( e, dt, node, config ) { favoriteSearch = ''; dt.state.save(); dt.column(26).search(favoriteSearch).draw(); dt.column(24).search(favoriteSearch).draw(); dt.column(21).order('desc').draw(); this.active(!this.active()); $(".dt-buttons").find(".active").removeClass("active"); node.addClass("active"); dt.buttons(2).text('Select by likes'); } } ] }, // export to excel // Reference: https://stackoverflow.com/questions/38958077/jquery-datatables-export-pdf-cuts-off-columns { extend: 'excelHtml5', text: 'Export to Excel', className: 'float-right', exportOptions: { orthogonal: 'export', columns: [ 27, ':visible' ], // exports links to excel //stripHtml: false }, title : function() { return "Lessons Learned"; } }, // column visibility // hide 26th and 27th column from column visbility // Reference: https://datatables.net/extensions/buttons/examples/column_visibility/columns.html // show all columns except 26th and 27th { extend: 'collection', text: 'Show columns', className: 'buttons-show float-right', buttons: [ { extend: 'colvisGroup', text: 'Show all columns', show: ':hidden', hide: [26, 27], }, { extend: 'colvisGroup', text: 'Restore default', show: ':hidden', hide: [0, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 23, 25, 26, 27, 28, 29], }, { popoverTitle: 'Column visbility', extend: 'colvis', collectionLayout: 'one-column', columns: ':not(.noVis)', } ] }, // export pdf //{ // extend : 'pdfHtml5', // exportOptions: { // columns: ':visible' // }, // title : function() { // return "All Lessons Learned"; // }, // orientation : 'landscape', // pageSize : 'A0' //}, // print //{ // extend: 'print', // exportOptions: // { // orthogonal: 'export', // columns: ':visible' // }, // orientation : 'landscape' //}, // copy to clipboard //{ // extend: 'copy', // exportOptions: { // columns: ':visible', // modifier: { // page: 'current' // } // } // }, // export to csv // { // extend : 'csvHtml5', // exportOptions: { // columns: ':visible' // }, // title : function() { // return "All Lessons Learned"; // } // }, ], select: { style: 'os', selector: 'td:first-child' }, }); dt_all.on('select.dt_all', () => { dt_all.searchPanes.rebuildPane(0, true); }); dt_all.on('deselect.dt_all', () => { dt_all.searchPanes.rebuildPane(0, true); }); $('#all-lessons').DataTable().columns.adjust(); // Filter toggle save stateSave // Reference: https://datatables.net/forums/discussion/comment/203356#Comment_203356 // Reference: http://live.datatables.net/fotorewe/26/edit new $.fn.dataTable.SearchPanes(dt_all, {}); dt_all.searchPanes.container().insertAfter('#allButton').addClass('hide-allsp').attr("id","allspCont"); dt_all.state.save(); // Save the current visiblity state of hidden sp_hidden = true; var loadedState = dt_all.state.loaded(); if (loadedState != null ){ if ((! loadedState.hasOwnProperty ("dateSearch")) || (! loadedState.hasOwnProperty ("favoriteSearch")) || (! loadedState.hasOwnProperty ("lessonsSearch"))){ if (! loadedState.hasOwnProperty ("dateSearch")){ dt_all.button('date-all:name').trigger(); } if (! loadedState.hasOwnProperty ("favoriteSearch")){ dt_all.button('fav-all:name').trigger(); } if (! loadedState.hasOwnProperty ("lessonsSearch")){ dt_all.button('lessons-all:name').trigger(); } } //Save state for date button - class and text //Reference: http://live.datatables.net/jodileti/1/edit else if ( loadedState.dateSearch === '' ) { dt_all.button('date-all:name').node().addClass('active'); dt_all.button('date-all:name').active( true ); dt_all.button('date:name').text( 'Select by date' ); } else if (loadedState.dateSearch === 'past-month' ) { dt_all.button('past-month:name').node().addClass('active'); dt_all.button('past-month:name').active( true ); dt_all.button('date:name').text( 'Past month' ); } else if (loadedState.dateSearch === 'past-six' ) { dt_all.button('past-six:name').node().addClass('active'); dt_all.button('past-six:name').active( true ); dt_all.button('date:name').text( 'Past 6 months' ); } else if (loadedState.dateSearch === 'past-year' ) { dt_all.button('past-year:name').node().addClass('active'); dt_all.button('past-year:name').active( true ); dt_all.button('date:name').text( 'Past year' ); } //Save state for favorites button - class and text //Reference: http://live.datatables.net/jodileti/1/edit if (loadedState.favoriteSearch === 'True') { dt_all.button('favorites:name').node().addClass('active'); dt_all.button('favorites:name').active( true ); dt_all.button('by-favorites:name').text( 'My likes' ); } else if (loadedState.favoriteSearch === '^(?!0)') { dt_all.button('popular:name').node().addClass('active'); dt_all.button('popular:name').active( true ); dt_all.button('by-favorites:name').text( 'Popular' ); } else if (loadedState.favoriteSearch === '') { dt_all.button('fav-all:name').node().addClass('active'); dt_all.button('fav-all:name').active( true ); dt_all.button('by-favorites:name').text( 'Select by likes' ); } //Save state for select my lessons button - class and text //Reference: http://live.datatables.net/jodileti/1/edit if (loadedState.lessonsSearch === 'Submitted') { dt_all.button('submitted:name').node().addClass('active'); dt_all.button('submitted:name').active( true ); dt_all.button('my-lessons:name').text( 'Submitted' ); } else if (loadedState.lessonsSearch === 'In review') { dt_all.button('in-review:name').node().addClass('active'); dt_all.button('in-review:name').active( true ); dt_all.button('my-lessons:name').text( 'In review' ); } else if (loadedState.lessonsSearch === 'Reviewed') { dt_all.button('reviewed:name').node().addClass('active'); dt_all.button('reviewed:name').active( true ); dt_all.button('my-lessons:name').text( 'Reviewed' ); } else if (loadedState.lessonsSearch === '' && loadedState.nameSearch !== '') { dt_all.button('my-all:name').node().addClass('active'); dt_all.button('my-all:name').active( true ); dt_all.button('my-lessons:name').text( 'All my lessons' ); } else if (loadedState.lessonsSearch === '' && loadedState.nameSearch === '') { dt_all.button('lessons-all:name').node().addClass('active'); dt_all.button('lessons-all:name').active( true ); dt_all.button('my-lessons:name').text( 'Select my lessons' ); } if ( loadedState.hasOwnProperty( "sp_hidden" )) { var sp_hidden = loadedState.sp_hidden; } else { sp_hidden = true; } } else { dt_all.button('date-all:name').trigger(); dt_all.button('fav-all:name').trigger(); dt_all.button('lessons-all:name').trigger(); } // If not hidden then remove hide-sp class if ( ! sp_hidden ) { $('#allspCont').removeClass('hide-allsp'); dt_all.state.save(); //Save if made visible } $('#allButton').on('click', function () { $('#allspCont').toggleClass('hide-allsp'); dt_all.state.save(); // Save updated visiblity }); //Move buttons to right side $('.buttons-show').detach().insertAfter('.mylength'); $('.buttons-excel').detach().insertAfter('.buttons-show'); //Group filters info text and buttons $('.filter-group').detach().prependTo('.filter-info-group'); $('.dtsp-title').detach().prependTo('.active-group'); $('.popup-group').detach().prependTo('.filter-group'); //Move bottom show entries after pagination $('.bottom .dataTables_length').detach().insertAfter('.dataTables_info'); // Reference: https://datatables.net/forums/discussion/comment/205474#Comment_205474 $('#all-lessons tbody').on("click", ".show_hide", function() { var index = $(this).index() + 1; $('table tr td:nth-child(' + index + ')').toggleClass("truncate"); }); });
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. | |