File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<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>
​
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
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
 */
​
console.log("js 004");
// Global var to track shown child rows
var childRows = null;
​
function format(d) {
    // `d` is the original data object for the row
    //console.log(d);
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
        '<tr>' +
        '<td>Full name:</td>' +
        '<td>' + d.name + '</td>' +
        '</tr>' +
        '<tr>' +
        '<td>Extension number:</td>' +
        '<td>' + d.extn + '</td>' +
        '</tr>' +
        '<tr>' +
        '<td>Extra info:</td>' +
        '<td>And any further details here (images etc)...</td>' +
        '</tr>' +
        '</table>';
}
​
​
addEventListener("DOMContentLoaded", function () {
​
    DataTable.defaults.column.orderSequence = ['desc', 'asc'];
​
    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: {
                response: 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: {
                response: 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 (e, json, data, action) {
            console.log("submit success triggered");
            noteTable.rows().every(function () {
                if (this.child.isShown()) {
                    updateChild(this);
                }
            });
            // Get shown rows
​
​
            
​
​
            //var childRows = mainTable.rows('tr.shown');
​
            //mainTable.ajax.reload;
​
            reloadChild(childRows);
            /*
            mainTable.ajax.reload(function (json) {
​
                // Loop open child rows to reopen
                childRows.every(function (rowIdx, tableLoop, rowLoop) {
                    d = this.data();
​
​
                    //this.show();
                    //$(this.node()).addClass('shown');
                    //row.child(formatCallback(row.data())).show();
                    //this.child(format(d)).show();
​
                });
            });
            */
​
        });
​
    }
​
    var editor = new DataTable.Editor({
        ajax: response: parentJSON,
        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() {
        //counter = 1200;
        //localStorage.setItem("counter", counter);
        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: {
            response: parentJSON,
            "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');
                        }
​
                    },
                    orderData: [1, 2]
                },
                {
                    "targets": [2],
                    orderData: [2, 1]
​
                },
                {
                    //"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();
    }
​
    $('button').on('click', function () {
​
        ;
        reloadChild();
    });
​
    function reloadChild() {
        // Get shown rows
        childRows = mainTable.rows('tr.shown')
​
        // Reload the Datatable
        mainTable.ajax.reload(function (json) {
​
            // Loop open child rows to reopen
            childRows.every(function (rowIdx, tableLoop, rowLoop) {
                d = this.data();
​
                this.child($(format(d))).show();
                $(this.node()).addClass('shown');
​
            });
        });
    }
​
});
​
​
​
​
8 errors 4 warnings
Line 73: Duplicate key 'type'.
Line 79: Duplicate key 'type'.
Line 86: Duplicate key 'type'.
Line 177: Duplicate key 'processing'.
Line 220: Expected '}' to match '{' from line 219 and instead saw ':'.
Line 220: Expected ')' and instead saw 'parentJSON'.
Line 221: Missing semicolon.
Line 221: Expected '}' to match '{' from line 38 and instead saw ':'.
Line 221: Expected ')' and instead saw '#GR_AlternativeBilling'.
Line 222: Expected an assignment or function call and instead saw an expression.
Line 222: Missing semicolon.
Line 222: Expected '(end)' and instead saw ':'.
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers