File
Login or Register via GitHub
<html> <head> <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><link href="https://cdn.datatables.net/buttons/3.0.2/css/buttons.dataTables.css" rel="stylesheet" type="text/css" /><script src="https://cdn.datatables.net/buttons/3.0.2/js/dataTables.buttons.js"></script><link href="https://cdn.datatables.net/select/2.0.1/css/select.dataTables.css" rel="stylesheet" type="text/css" /><script src="https://cdn.datatables.net/select/2.0.1/js/dataTables.select.js"></script><link href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" /><script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script> <meta charset=utf-8 /> <title>DataTables - JS Bin</title> </head><body class="dataTables"> <div class="container"> <h1> Referral Log <span></span> </h1> <table cellpadding="0" cellspacing="0" border="0" class="display" id="GR_AlternativeBilling" width="100%"> <thead> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </thead> </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;}var mainJSON = "{\"draw\":4,\"data\":[{\"DT_RowId\":\"row_860\",\"Patient_DOB\":\"1984-04-16T00:00:00\",\"TableID\":860,\"Scheduled\":false,\"PatientName\":\"Test Patient\",\"PatientPhone\":\"916-123-4444\",\"MDname\":\"Dr Bob Hartful\",\"WCclaimNo\":\"123434\",\"InsuranceName\":\"test insurance co\",\"OldVersion\":false,\"EditedBy\":\"dpanscik@yahoo.com\",\"EditedDate\":\"2024-08-18T14:20:04.477\",\"ChildLocator\":1723585171582,\"AllDone\":true,\"HighlightYellow\":false},{\"DT_RowId\":\"row_861\",\"Patient_DOB\":\"1899-12-31T00:00:00\",\"TableID\":861,\"Scheduled\":false,\"PatientName\":\"Test Patient 2\",\"PatientPhone\":\"\",\"MDname\":\"\",\"WCclaimNo\":\"\",\"InsuranceName\":\"\",\"OldVersion\":false,\"EditedBy\":\"dpanscik@yahoo.com\",\"EditedDate\":\"2024-08-17T19:12:28\",\"ChildLocator\":1723603110821,\"AllDone\":false,\"HighlightYellow\":false},{\"DT_RowId\":\"row_862\",\"Patient_DOB\":\"1900-01-01T00:00:00\",\"TableID\":862,\"Scheduled\":false,\"PatientName\":\"test name 3\",\"PatientPhone\":\"\",\"MDname\":\"\",\"WCclaimNo\":\"\",\"InsuranceName\":\"\",\"OldVersion\":false,\"EditedBy\":\"magdalena@globalreachotpt.com\",\"EditedDate\":\"2024-08-18T00:00:04.717\",\"ChildLocator\":1723679527323,\"AllDone\":true,\"HighlightYellow\":false}],\"recordsTotal\":388,\"recordsFiltered\":3,\"error\":null,\"fieldErrors\":[],\"id\":null,\"meta\":{},\"options\":{},\"searchBuilder\":null,\"searchPanes\":null,\"files\":{},\"upload\":{\"id\":null},\"debug\":null,\"cancelled\":[]}";var childJSON = "{\"draw\":1,\"data\":[{\"DT_RowId\":\"row_4710\",\"TableID\":4710,\"ForTableName\":\"AlternativeBilling\",\"NoteType\":\"test\",\"Note\":\"test123456\",\"EditedBy\":\"dpanscik@yahoo.com\",\"EditedDate\":\"2024-08-17T17:59:05\",\"ParentLocator2\":1723585171582,\"OldVersion\":false,\"NoteID2\":null},{\"DT_RowId\":\"row_4695\",\"TableID\":4695,\"ForTableName\":\"AlternativeBilling\",\"NoteType\":\"test note\",\"Note\":\"test note 333\",\"EditedBy\":\"dpanscik@yahoo.com\",\"EditedDate\":\"2024-08-16T22:57:16\",\"ParentLocator2\":1723585171582,\"OldVersion\":false,\"NoteID2\":null},{\"DT_RowId\":\"row_4711\",\"TableID\":4711,\"ForTableName\":\"AlternativeBilling\",\"NoteType\":\"test note 2\",\"Note\":\"test\",\"EditedBy\":\"dpanscik@yahoo.com\",\"EditedDate\":\"2024-08-17T17:59:51\",\"ParentLocator2\":1723585171582,\"OldVersion\":false,\"NoteID2\":null},{\"DT_RowId\":\"row_4712\",\"TableID\":4712,\"ForTableName\":\"AlternativeBilling\",\"NoteType\":\"test note 3\",\"Note\":\"test note 1\",\"EditedBy\":\"dpanscik@yahoo.com\",\"EditedDate\":\"2024-08-17T18:09:48\",\"ParentLocator2\":1723585171582,\"OldVersion\":false,\"NoteID2\":1723918188497},{\"DT_RowId\":\"row_4716\",\"TableID\":4716,\"ForTableName\":\"AlternativeBilling\",\"NoteType\":\"test note 4\",\"Note\":\"test note 12\",\"EditedBy\":\"dpanscik@yahoo.com\",\"EditedDate\":\"2024-08-17T18:23:50\",\"ParentLocator2\":1723585171582,\"OldVersion\":false,\"NoteID2\":1723918226309},{\"DT_RowId\":\"row_4720\",\"TableID\":4720,\"ForTableName\":\"AlternativeBilling\",\"NoteType\":\"test note 5\",\"Note\":\"test note 5\",\"EditedBy\":\"dpanscik@yahoo.com\",\"EditedDate\":\"2024-08-17T18:31:28\",\"ParentLocator2\":1723585171582,\"OldVersion\":false,\"NoteID2\":0},{\"DT_RowId\":\"row_4762\",\"TableID\":4762,\"ForTableName\":\"AlternativeBilling\",\"NoteType\":\"test note 6\",\"Note\":\"test note 67788990011223344\",\"EditedBy\":\"dpanscik@yahoo.com\",\"EditedDate\":\"2024-08-18T14:20:04\",\"ParentLocator2\":1723585171582,\"OldVersion\":false,\"NoteID2\":1723919845585}],\"recordsTotal\":7,\"recordsFiltered\":7,\"error\":null,\"fieldErrors\":[],\"id\":null,\"meta\":{},\"options\":{},\"searchBuilder\":null,\"searchPanes\":null,\"files\":{},\"upload\":{\"id\":null},\"debug\":null,\"cancelled\":[]}";/* * Editor client script for DB table GR_AlternativeBilling * Created by http://editor.datatables.net/generator */// Global var to track shown child rowsvar noteChildRows = null;addEventListener("DOMContentLoaded", function () { function createNoteChild(row, data) { // This is the table we'll convert into a DataTable //var table = $('<table class="display childGrid" width="100%"/>'); var table = $('<table class="display childGrid" width="90%"/>'); // Display it the child row row.child(table).show(); var rowData = row.data(); var noteEditor = new $.fn.dataTable.Editor({ ajax: { respose: childJSON, data: function (d) { d.ForTableID = rowData.TableID; d.ChildLocator = rowData.ChildLocator; d.NoteID = rowData.NoteID; } }, table: table, fields: [{ label: "NoteType:", name: "NoteType" }, { label: "Note:", name: "Note", type: 'textarea', }, { type: 'readonly', label: "EditedBy", name: "EditedBy", type: 'hidden', }, { type: 'readonly', label: "EditedDate", name: "EditedDate", type: 'hidden', }, { type: 'readonly', label: "NoteID2", name: "NoteID2", type: 'hidden', } ], select: true, processing: true, }); // Initialise as a DataTable var noteTable = table.DataTable({ "orderCellsTop": true, "processing": true, // for show progress bar "language": { "processing": '<span class="sr-only h1" >Loading...</span> ' }, "filter": false, // this is for disable filter (search box) "orderMulti": false, // for disable multiple column at once "pageLength": 25, "lengthChange": true, "search": { "caseInsensitive": true }, "responsive": false, //for automatic child tables "serverSide": true, ajax: { respose: childJSON, "type": "POST", "datatype": "json", "dataSrc": function (json) { //reset auto logout setTimeout(resetTimer, 1000); return json.data; }, }, "columnDefs": [ ], columns: [ { "data": "NoteType", "title": "Note Type", }, { "data": "Note", "title": "Note", }, { "data": "EditedBy", "title": "Edited By", }, { "data": "EditedDate", //render: DataTable.render.datetime('h:MM a dddd D MMMM YYYY'), render: function (data, type, row, meta) { var dateretrun = moment.utc(data).local().format('h:mm a dddd MMMM D YYYY'); if (dateretrun == 'Invalid date') { dateretrun = ""; } return dateretrun; }, "title": "Edit Date", }, ], layout: { topStart: { buttons: [ { extend: 'create', editor: noteEditor }, { extend: 'edit', editor: noteEditor }, { extend: 'remove', editor: noteEditor } ] } }, select: true, processing: true, }); noteEditor.on('submitSuccess', function () { console.log("submit success triggered"); noteTable.rows().every(function () { if (this.child.isShown()) { updateChild(this); } }); // Get shown rows noteChildRows = mainTable.rows('tr.shown'); //mainTable.ajax.reload(); // Reload the Datatable mainTable.ajax.reload(function (json) { // Loop open child rows to reopen noteChildRows.every(function (rowIdx, tableLoop, rowLoop) { d = this.data(); this.createNoteChild(rowIdx, d()); this.nodes().to$().addClass('shown'); }); }); }); } var editor = new DataTable.Editor({ ajax: mainJSON, table: '#GR_AlternativeBilling', fields: [ { "label": "All Done", "name": "AllDone", type: 'checkbox', separator: '|', options: [{ label: '', value: 1 }] }, { "label": "Scheduled", "name": "Scheduled", type: 'checkbox', separator: '|', options: [{ label: '', value: 1 }] }, { "label": "Highlight Yellow", "name": "HighlightYellow", type: 'checkbox', separator: '|', options: [{ label: '', value: 1 }] }, { "label": "Patient Name (LAST, FIRST)", "name": "PatientName", fieldInfo: 'last, first', }, { "label": "Patient Phone:", "name": "PatientPhone" }, { "label": "Patient DOB:", "name": "Patient_DOB", fieldInfo: 'm/d/y (or) month-name day year', }, { "label": "MD name:", "name": "MDname" }, { "label": "WC Claim #:", "name": "WCclaimNo" }, { "label": "Insurance Name:", "name": "InsuranceName" }, { type: 'readonly', label: "Child Locator:", name: "ChildLocator", type: 'hidden', }, ] }); function resetTimer() { var twentyMinutesLater = new Date(); twentyMinutesLater.setMinutes(twentyMinutesLater.getMinutes() + 20); $("span#logoutTime").html(twentyMinutesLater); } var mainTable = new DataTable('#GR_AlternativeBilling', { "search": { "caseInsensitive": true }, "serverSide": true, ajax: { respose: mainJSON, "type": "POST", "datatype": "json", "dataSrc": function (json) { //console.log(json); for (var i = 0, ien = json.data.length; i < ien; i++) { json.data[i].Patient_DOB = moment.utc(json.data[i].Patient_DOB).format('MMMM D YYYY'); if (json.data[i].Patient_DOB == "Invalid date") { json.data[i].Patient_DOB = ""; } } //reset auto logout setTimeout(resetTimer, 1000); return json.data; }, //return moment.utc(data.d.Patient_DOB).local().format('MMMM D YYYY') }, createdRow: function (row, data, dataIndex) { if (data.AllDone == true) { $(row).css('background', 'lightgrey'); } if (data.HighlightYellow == true) { $(row).css('background', 'yellow'); } }, "columnDefs": [ { "targets": [1], createdCell: function (td, cellData, rowData, row, col) { if (cellData == true) { $(td).css('background', 'darkgreen'); } } }, { //"targets": [3], //"visible": true, //"searchable": false, //"orderable": false, //"type": "datetime", //"format": "ddd, DD MMM YYYY", }, { "targets": [12], "visible": true, "searchable": false, "orderable": false, }, ], columns: [ { "data": "ChildLocator", "title": "ID", }, { "data": "AllDone", "title": "All Done", render: (data, type, row) => type === 'display' ? '<input type="checkbox" class="allDone disabledCheckbox" disabled="disabled">' : data, className: 'dt-body-center' }, { "data": "Scheduled", "title": "Scheduled", render: (data, type, row) => type === 'display' ? '<input type="checkbox" class="scheduled disabledCheckbox" disabled="disabled">' : data, className: 'dt-body-center' }, { "data": "HighlightYellow", "title": "HY", render: (data, type, row) => type === 'display' ? '<input type="checkbox" class="highlightYellow disabledCheckbox" disabled="disabled">' : data, className: 'dt-body-center' }, { "data": "PatientName", "title": "Patient Name", }, { "data": "PatientPhone", "title": "Patient Phone", }, { "data": "Patient_DOB", "title": "Patient DOB", //render: function (data, type, row, meta) { return moment.utc(data).local().format('MMMM D YYYY'); }, }, { "data": "MDname", "title": "MD name", }, { "data": "WCclaimNo", "title": "WC Claim No", }, { "data": "InsuranceName", "title": "Insurance Name", }, { "data": "EditedDate", //render: DataTable.render.datetime('h:MM a dddd D MMMM YYYY'), render: function (data, type, row, meta) { var dateretrun = moment.utc(data).local().format('h:mm a dddd MMMM D YYYY') if (dateretrun == 'Invalid date') { dateretrun = ""; } return dateretrun; }, "title": "Edit Date", }, { "data": "EditedBy", "title": "Edited By", }, { className: 'note-details-control dt-control', orderable: false, data: null, defaultContent: '', width: '10%' }, ], layout: { topStart: { buttons: [ { extend: 'create', editor: editor }, { extend: 'edit', editor: editor }, { extend: 'remove', editor: editor } ] } }, select: true, processing: true, rowCallback: function (row, data) { // Set the checked state of the checkbox in the table row.querySelector('input.scheduled').checked = data.Scheduled == 1; row.querySelector('input.allDone').checked = data.AllDone == 1; row.querySelector('input.highlightYellow').checked = data.HighlightYellow == 1; } }); // Activate an inline edit on click of a table cell //mainTable.on('click', '> tbody > td:not(:last-child)', function (e) { // editor.inline(this); //}); $('#GR_AlternativeBilling tbody').on('click', 'td.note-details-control', function () { var tr = $(this).closest('tr'); var row = mainTable.row(tr); if (row.child.isShown()) { // This row is already open - close it destroyChild(row); tr.removeClass('shown'); } else { // Open this row //format(row.data()); createNoteChild(row, row.data()); tr.addClass('shown'); } }); function updateChild(row) { $("table", row.child()) .DataTable() .ajax.reload(); console.log("reload triggered"); } function destroyChild(row) { var table = $("table", row.child()); table.detach(); table.DataTable().destroy(); // And then hide the row row.child.hide(); }});
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. | |