Datatables show info on child rows without Ajax Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Datatables show info on child rows without Ajax without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I’m trying to display extra info on child rows without using ajax, the thing is that it works well but I want to display more than one value in a list way.
Something like this

Any suggestions?

I’m using web2py to take the data and fill the table, this is my try:

<script>
            var tabla;
        $(document).ready(function(){
           tabla= $('#tablaGenerica').DataTable( {
            } );

        function format(value) {
              return '<div>Hidden Value: ' + value + '</div>';
          }

        $('#tablaGenerica').on('click', 'td.details-control', function () {
                  var tr = $(this).closest('tr');
                  var row = tabla.row(tr);

                  if (row.child.isShown()) {
                      // This row is already open - close it
                      row.child.hide();
                      tr.removeClass('shown');
                  } else {
                      // Open this row
                      row.child(format(tr.data('child-value'))).show();
                      tr.addClass('shown');
                  }
              });

</script>

<table id="tablaGenerica" class="tablaC table-striped hover cell-border" cellspacing="0" width="100%" >
        <thead>
            <tr>
                 <th></th>
                 <th class="select-filter">Name</th>
                 <th class="select-filter">Age</th>
                 <th class="select-filter">Country</th>
                 <th class="select-filter">Level</th>
            </tr>
        </thead>
            <tbody>
                   {{for person in formList:}}
                 <tr data-child-value="{{=person.Person.salary}}">
                   <td class="details-control"></td>
                   <td>{{=person.Person.name}}</td>
                   <td>{{=person.Person.age}}</td>
                   <td>{{=person.Person.country}}</td>
                   <td>{{=person.Person.level}}</td>
                </tr>
                {{pass}}
            </tbody>
</table>

Answer

I’d suggest to refactor your app slightly, as you don’t really need to cook up your HTML server-side, DataTables can handle that for you on the client end.

You may simply prepare the array of objects, where each entry corresponds to the table row and each object property / inner array element – to respective column (or details entry):

[
    {id: 1, name: 'Clark Kent', age: 32, country: 'USA', level: 'high'},
    {id: 2, name: 'Arthur Curry', age: 31, country: 'USA', level: 'medium'},
    {id: 3, name: 'Barry Allen', age: 24, country: 'USA', level: 'low'}
]

In order to link those object properties / inner array items to your table columns, you may use DataTables option columns or columnDefs :

$('#tablaGenerica').DataTable({
    ...
    columns: [
        {title: 'ID', data: 'id'},
        {title: 'Name', data: 'name'},
        ...
    ]
});

After that (and this is the essential part of the answer), in order to show multiple details within your child row, you simply need to modify your format() function, so that it returns HTML markup of the child row with all the necessary details:

const format = data => `
    <div>Age: ${data.age}</div>
    <div>Country: ${data.country}</div>
    <div>Level: ${data.level}</div>
`;

So, complete DEMO of your case might look something, like that:

//specify source data
const dataSrc = [
    {id: 1, name: 'Clark Kent', age: 32, country: 'USA', level: 'high'},
    {id: 2, name: 'Arthur Curry', age: 31, country: 'USA', level: 'medium'},
    {id: 3, name: 'Barry Allen', age: 24, country: 'USA', level: 'low'}
];
//initialize DataTables
const dataTable = $('#tablaGenerica').DataTable({
  //specify necessary options to adjust DataTable to your needs
  dom: 't',
  data: dataSrc,
  //specify columns that should be visible initially
  columns: [
    {title: 'ID', data: 'id'},
    {title: 'Name', data: 'name'}
  ]
});
//declare function that renders child row with hidden details
const format = data => `
    <div>Age: ${data.age}</div>
    <div>Country: ${data.country}</div>
    <div>Level: ${data.level}</div>
`;
//attach event listener to row click
$('#tablaGenerica').on('click', 'tr', function(){
  //get clicked row into a variable
  const clickedRow = dataTable.row($(this));
  //show/hide child row
  clickedRow.child.isShown() ? clickedRow.child.hide() : clickedRow.child(format(clickedRow.data())).show();
  //toggle 'shown' class
  $(this).toggleClass('shown');
});
#tablaGenerica tbody tr.even:hover, #tablaGenerica tbody tr.odd:hover{
  cursor: pointer;
  background: lightgray;
}
<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="tablaGenerica"></table>
</body>
</html>
We are here to answer your question about Datatables show info on child rows without Ajax - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji