File
Add library
Share
Login or Register
Help
HTML
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
<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/dt-2.0.5/b-3.0.2/date-1.5.2/sl-2.0.1/datatables.min.css" rel="stylesheet">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.datatables.net/v/bs5/dt-2.0.5/b-3.0.2/date-1.5.2/sl-2.0.1/datatables.min.js"></script>
    
    <link href="https://editor.datatables.net/extensions/Editor/css/editor.bootstrap5.css" rel="stylesheet" type="text/css" />
<script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
<script src="https://editor.datatables.net/extensions/Editor/js/editor.bootstrap5.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
<body class="dataTables">
    <div class="container">
​
        <h1>
            DataTables Editor <span>GR_AlternativeBilling</span>
        </h1>
​
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="GR_AlternativeBilling" width="100%">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Patient</th>
                    <th>Insurance</th>
                    <th>Employer</th>
                    <th>ContactName</th>
                    <th>ContactPhone</th>
                    <th>ContactEmail</th>
                    <th>Method</th>
                    <th>NumberOfVisits</th>
                    <th></th>
                </tr>
            </thead>
        </table>
​
    </div>
</body>
</html>
</html>
CSS
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScript
 
const dataSet = [
  {
    id: '123',
    PatientName: 'David Smith', 
    Insurance: 'Cheap Insurance', 
    Employer: 'Bobs Tavern', 
    ContactName: 'Bob Bodenall', 
    ContactPhone: '+44 0743534', 
    ContactEmail: 'no@way.com', 
    Method: 'test method', 
    NumberOfVisits: '22'
  }
​
];
/*
 * Editor client script for DB table GR_AlternativeBilling
 * Created by http://editor.datatables.net/generator
 */
​
addEventListener("DOMContentLoaded", function () {
    var editor = new DataTable.Editor( {
        data: dataSet,
      idSrc:  'id',
        table: '#GR_AlternativeBilling',
        fields: [
                    {
                "label": "id",
                "name": "id"
            },  
          {
                "label": "Patient :",
                "name": "PatientName"
            },
            {
                "label": "Insurance:",
                "name": "Insurance"
            },
            {
                "label": "Employer:",
                "name": "Employer"
            },
            {
                "label": "ContactName:",
                "name": "ContactName"
            },
            {
                "label": "ContactPhone:",
                "name": "ContactPhone"
            },
            {
                "label": "ContactEmail:",
                "name": "ContactEmail"
            },
            {
                "label": "Method:",
                "name": "Method"
            },
            {
                "label": "NumberOfVisits:",
                "name": "NumberOfVisits"
            }
        ]
    } );
​
    var mainTable = new DataTable('#GR_AlternativeBilling', {
        data: dataSet,
        idSrc:  'id',
        columns: [
​
            {
                "data": "id"
            },  
          {
                "data": "PatientName"
            },
            {
                "data": "Insurance"
            },
            {
                "data": "Employer"
            },
            {
                "data": "ContactName"
            },
            {
                "data": "ContactPhone"
            },
            {
                "data": "ContactEmail"
            },
            {
                "data": "Method"
            },
            {
                "data": "NumberOfVisits"
            },
            {
                className: '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,
    });
    // 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.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());
            createChild(row, row.data());
            tr.addClass('shown');
        }
​
    });
    function createChild(row, data) {
​
        // This is the table we'll convert into a DataTable
        var table = $('<table class="display childGrid" width="100%"/>');
​
        // Display it the child row
        row.child(table).show();
​
        // Initialise as a DataTable
        var childTable = table.DataTable({
            data: dataSet,
            columns: [
​
                {
                    "data": "PatientName"
                },
                {
                    "data": "Insurance"
                },
                {
                    "data": "Employer"
                },
                {
                    "data": "ContactName"
                },
                {
                    "data": "ContactPhone"
                },
                {
                    "data": "ContactEmail"
                },
                {
                    "data": "Method"
                },
                {
                    "data": "NumberOfVisits"
                },
                {
                    className: '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,
        });
​
​
    }
​
    function destroyChild(row) {
        var table = $("table", row.child());
        table.detach();
        table.DataTable().destroy();
​
        // And then hide the row
        row.child.hide();
    }
​
});
​
​
1 warning
Line 1: 'const' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers