CODEWITHSUNDEEP
jqueryajaxlaraveldatatables
Web App Developer Freelance
Web App Developer Freelance

Reputation: 52

How to build a table with jQuery datatables with row child

I'm using jQuery datatable with Ajax. Server with Laravel returns a JSON with the format:

{
"draw":0,
"recordsTotal":201
,"recordsFiltered":201,
"data":[{
"id":"1",
"numsocio":"1",
"identificacion":"9999999999",
"nombre":"Anna,
"apellidos":"Desclau", ........ etc

And I want to build a table like this (3 rows sample)

table

I'm using

$(document).ready(function () {
    $('#socios_datatable').DataTable({
        ajax: '{{ route('socios.datatable') }}',
        columns: [
            { data: 'foto' },
            { data: 'nombre' },
            { ... }    
        ]
    });
});

And I've been testing with the info post in http://www.cscc.edu/_resources/app-data/datatables/examples/api/row_details.html but I don't get it to make it work. How to build easily a row with 2 subrows? I see that jQuery datatables is perfect for one row with several columns but for more complex rows is difficult.

May anybody help me?

Upvotes: 2

Views: 1159

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58880

I would strongly recommend using Child rows for showing extra information.

Unfortunately ROWSPAN and COLSPAN attributes are not officially supported in table body by jQuery DataTables.

However, there is a workaround. It has some limitations though, you won't be able to use most of the DataTables extensions and searching/sorting need to either be disabled and adjusted to work correctly.

It is possible to emulate ROWSPAN attribute using RowsGroup plug-in, see jQuery DataTables: ROWSPAN in table body TBODY article for more details.

It is possible to emulate COLSPAN attribute using a trick with hidden cells, see jQuery DataTables: COLSPAN in table body TBODY article for more details.

It is possible to group cells both vertically and horizontally simultaneously if we combine both workarounds described above.

For example, sample code for your scenario with data received via Ajax could look like:

var table = $('#example').DataTable({
   'ajax': 'https://api.myjson.com/bins/pr6dp',
   'columnDefs': [
      {
         'targets': [1, 2, 3, 4, 5],
         'orderable': false,
         'searchable': false
      }
   ],
   'rowsGroup': [0],
   'createdRow': function(row, data, dataIndex){
      // Use empty value in the "Office" column
      // as an indication that grouping with COLSPAN is needed
      if(data[2] === ''){
         // Add COLSPAN attribute
         $('td:eq(1)', row).attr('colspan', 5);

         // Hide required number of columns
         // next to the cell with COLSPAN attribute
         $('td:eq(2)', row).css('display', 'none');
         $('td:eq(3)', row).css('display', 'none');
         $('td:eq(4)', row).css('display', 'none');
         $('td:eq(5)', row).css('display', 'none');
      }
   }      
});

See this example for code and demonstration.

See jQuery DataTables: COLSPAN in table body TBODY - COLSPAN and ROWSPAN article for more details.

Upvotes: 1

Related Questions