How to build a table with jQuery datatables with row child

Question

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)

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?

you forgot to add this. $('#example 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 { // Open this row row.child( format(row.data()) ).show(); tr.addClass('shown'); } } ); — JoeCrash
– JoeCrash, Commented Nov 3, 2017 at 17:27
ensenia mas code si quieries mas ayuda. (show more code if you want more help) — JoeCrash
– JoeCrash, Commented Nov 3, 2017 at 17:29
I dont want to open or close rows... I just want to do like a colspan — Web App Developer Freelance
– Web App Developer Freelance, Commented Nov 3, 2017 at 19:23
@davidkonrad, there is a workaround for colspan functionality, if sorting can be disabled. — Gyrocode.com
– Gyrocode.com, Commented Nov 6, 2017 at 12:17
@davidkonrad, I will try to produce an answer, it just requires some time create a working example. — Gyrocode.com
– Gyrocode.com, Commented Nov 7, 2017 at 20:10

Gyrocode.com · Accepted Answer · 2018-02-02 21:37:17Z

1

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.

answered Feb 2, 2018 at 21:37

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

davidkonrad Over a year ago

Nice job!!! :) But with all respect, it is merely a cosmetic solution, you have to provide double JSON for each row, and after the cosmetic styling you could insert for example a <table> in code. I guess it would not be so hard to have a nested JSON with child content to insert as details / extra row. I think it is really good if you would like to place a header above each row. BTW, see your point with multiple links to the same URL with different anchor texts, but I believe the first anchor text is the one that actually have importance / gives your site keyword value.

Gyrocode.com Over a year ago

@davidkonrad, it could be hard to insert a second row with details and be compatible with RowsGroup plug-in. My solution possibly have limited use for plain tables that need jQuery DataTables support.

Collectives™ on Stack Overflow

How to build a table with jQuery datatables with row child

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related