File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.3.js"></script>
​
<link href="https://cdn.datatables.net/v/dt/dt-2.1.4/sl-2.0.5/datatables.min.css" rel="stylesheet">
 
<script src="https://cdn.datatables.net/v/dt/dt-2.1.4/sl-2.0.5/datatables.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <button id="function">Reload main table - createNoteChild</button>
      <button id="click">Reload main table - click child</button>
      <table id="GR_AlternativeBilling" class="display" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
            <th></th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
            <th></th>
          </tr>
        </tfoot>
      </table>
    </div>
  </body>
</html>
JavaScriptSaved
 
var mainTable = new DataTable('#GR_AlternativeBilling', {
  processing: true,
  serverSide: true,
  ajax: {
    url: '/ssp/objects.php',
    type: 'post'
  },
  columns: [
    { data: 'first_name' },
    { data: 'last_name' },
    { data: 'position' },
    { data: 'office' },
    { data: 'start_date' },
    { data: 'salary' },
            {
                className: 'note-details-control dt-control',
                orderable: false,
                data: null,
                defaultContent: '',
                width: '10%'
            },
  ],
});
​
    
    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();
        // 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": 5,
            "lengthChange": true,
            "search": {
                "caseInsensitive": true
            },
            "responsive": false, //for automatic child tables
            "serverSide": true,
  ajax: {
    url: '/ssp/objects.php',
    type: 'post'
  },
  columns: [
    { data: 'first_name' },
    { data: 'last_name' },
    { data: 'position' },
    { data: 'office' },
    { data: 'start_date' },
    { data: 'salary' },
  ],
​
            select: true,
            processing: true,
        });
}
​
​
    $('#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 destroyChild(row) {
        var table = $("table", row.child());
        table.detach();
        table.DataTable().destroy();
​
        // And then hide the row
        row.child.hide();
    }
​
    $('#function').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) {
​
                createNoteChild( this, this.data() );
                $(this.node()).addClass('shown');
​
            });
        });
    }
​
​
    $('#click').on('click', function () {
​
        ;
        reloadChildClick();
    });
​
    function reloadChildClick() {
        // 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) {
​
                $( mainTable.cell( this, 6 ).node() ).click();
​
            });
        });
    }
​
2 errors 3 warnings
Line 65: Duplicate key 'processing'.
Line 103: Unnecessary semicolon.
Line 109: Missing semicolon.
Line 127: Unnecessary semicolon.
Line 133: Missing semicolon.
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers