How to add dynamic data in collapsible rows?

ShahiDev

I want to add a <td> multiple times on basis of my ajax data and row is collapsible. You can say it is history of action performed on row. In one row it is 1 time and in 2nd row it is 4 times. And it's value is changing too. How can i achieve this? If you cant understand my question let me know i will explain it in more detail.

/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<div class="slider">'+
    '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+

            '<td>Extra info:</td>'+
            '<td>Here is single row, It can be none or it can be 10. How to do this?</td>'+
        '</tr>'+
    '</table>'+
   '</div>';
   }

    $(document).ready(function() {
     var table = $('#example').DataTable( {
    "ajax": 'https://api.myjson.com/bins/16lp6',
    scrollY:        250,
    deferRender:    true,
    scroller:       true,
    "columns": [
        {
            "class":          'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "salary" },
        { "data": "extn", "visible": false }

    ],
    "order": [[1, 'asc']]
    } );

   // Add event listener for opening and closing details
   $('#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
        $('div.slider', row.child()).slideUp( function () {
            row.child.hide();
            tr.removeClass('shown');
        } );
    }
    else {
        // Open this row
        row.child( format(row.data()), 'no-padding' ).show();
        tr.addClass('shown');

        $('div.slider', row.child()).slideDown();
    }
   } );
  } );

kthorngren

Where are you storing this history information?

You just need to access it then use the format function to put together the rows the way you want. Maybe this ajax loaded rows detail blog will help:
https://datatables.net/blog/2017-03-31

Kevin

colin

Hi @ShahiDev ,

Sorry, I don't understand that, so the extra detail would be useful, please.

Cheers,

Colin

ShahiDev

@kthorngren should i use a loop to ready the template before returning it? Can you clarify a little more?

kthorngren

should i use a loop to ready the template before returning it? Can you clarify a little more?

Hard to say without understanding more about the data you want to display. Where is it stored? What is the format?

The format function is not specific to Datatables. Its simply a function to take your data and format it in an HTML structure that you can display. Think about how you would use console.log to display that data and that is probably what you want to do in the format function. You will want to keep the format function as quick as possible.

Kevin