Is nested dynamic table creation is possible in Datatable?

vsverma11 · March 2016

Hi,

Please suggest me????

Regards,
vsverma

zajc · March 2016

Bootstrap example.

HTML

<body class="bootstrap">
  <div class="container">
    <h1>Bla bla
      <span>test test</span></h1>
    <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="close" width="100%">
      <thead>
        <tr>
          <th></th>
          <th>column1</th>
          <th>column2</th>
        </tr>
      </thead>
    </table>
  </div>
</body>

Javascript

function format(d) {
  // `d` is the original data object for the row
  return '<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="close2' +
    '" width="75%">' +
    '<thead>' +
    '<tr>' +
    '<th>Column1</th>' +
    '<th>Column2</th>'
  '</tr>' +
  '</thead>' +
  '</table>';
}
(function($) {
  $(document).ready(function() {
    var editor = new $.fn.dataTable.Editor({
      ajax: 'php/close.php',
      table: '#close',
      fields: [{
        "label": "Column1",
        "name": "column1"
      }, {
        "label": "Column2",
        "name": "column2"
      }]
    });
    var table = $('#close').DataTable({
      ajax: 'php/close.php',
      columns: [{
        "class": "details-control",
        "orderable": false,
        "data": null,
        "defaultContent": ""
      }, {
        "data": "column1"
      }, {
        "data": "column2"
      }],
      select: true,
      lengthChange: false
    });
    new $.fn.dataTable.Buttons(table, [{
      extend: "create",
      editor: editor
    }, {
      extend: "edit",
      editor: editor
    }, {
      extend: "remove",
      editor: editor
    }]);
    table.buttons().container()
      .appendTo($('.col-sm-6:eq(0)', table.table().container()));
    // Add event listener for opening and closing details
    $('#close tbody').on('click', 'td.details-control', function() {
      var tr = $(this).closest('tr');
      var row = table.row(tr);
 
      if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
      } else {
        var d = row.data();
        // Open this row
        row.child(format(d)).show();
        tr.addClass('shown');
        // Re-initialize DataTables for the child row(s)
        var editor2 = new $.fn.dataTable.Editor({
          ajax: {
            "url": "php/close.php",
          },
          table: '#close2',
          fields: [{
            "label": "Column1",
            "name": "column1"
          }, {
            "label": "Column2",
            "name": "column2"
          }]
        });
        var table2 = $('#close2').DataTable({
          ajax: {
            "url": "php/close.php"
          },
          columns: [{
            "data": "column1"
          }, {
            "data": "column2"
          }],
          select: true,
          lengthChange: false,
          searching: false,
          info: false,
          paging: false
        });
        new $.fn.dataTable.Buttons(table2, [{
          extend: "create",
          editor: editor2
        }, {
          extend: "edit",
          editor: editor2
        }, {
          extend: "remove",
          editor: editor2
        }]);
        table2.buttons().container()
          .appendTo($('.col-sm-6:eq(0)', table2.table().container()));
      }
    });
  });
}(jQuery));

PHP data

<?php

// DataTables PHP library and database connection
include( "lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;


// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'close', 'column1')
    ->fields(
        Field::inst( 'column1' ),
        Field::inst( 'column2' )
    )
    ->process( $_POST )
    ->json();

vsverma11 · March 2016

thanks alot zajc for your valuable reply.

i have give a image src for a column when data loading dynamically in table but it does not work.

Could you explain me how to set img src for a column???

"columns": [{ "data": "<img src='" + data.HOTEL_PICTURE + "'/>"}]

vsverma11 · March 2016

i got the answer. please use everyone like this

"columns": [{ "data": "HOTEL_PICTURE",
"render": function (HOTEL_PICTURE) {
return "<img src='" + HOTEL_PICTURE + "'/>";
}]

Is nested dynamic table creation is possible in Datatable?

Is nested dynamic table creation is possible in Datatable?

Replies

Howdy, Stranger!

Categories

DataTables

Is nested dynamic table creation is possible in Datatable?

Is nested dynamic table creation is possible in Datatable?

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables