Expand row not working with data function

peter-werk

I have a problem with expand row function, tried many solutions and nothing move my row

https://jsfiddle.net/so4be3yt/3/

////

function format ( d ) { // `d` is the original data object for the row return ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ '

Full name:	'+d.name+'
Extension number:	'+d.extn+'
Extra info:	And any further details here (images etc)...

'; } $(document).ready(function () { $('#data').DataTable({ "pageLength": 25, responsive: true, ajax: '/api/data', columns: [ {data: 'null', className: "dt-control", orderable: false, "defaultContent": ''}, } ], "order": [[1, 'dsc']] }); }); $.fn.dataTable.render.ellipsis = function () { return function ( data, type, row ) { return type === 'display' && data.length > 10 ? data.substr( 0, 2 ) +'…'+ data.substr( -4 ) : data; } // Add event listener for opening and closing details $('#data tbody').on('click', 'td.dt-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'); } } ); } ); };

kthorngren

You have a syntax error:

Uncaught SyntaxError: Unexpected token ')'

I fixed that but now this error appears:

jquery-3.4.1.slim.js:3850 Uncaught TypeError: $.ajax is not a function

You need to load regular jQuery not jQuery.slim for ajax. Please fix the test case so it runs to demonstrate the problem.

Kevin

peter-werk

Below is full page with the problem as its very hard to recreate this case in jsfilde data is loaded from SQlLite db

http://drip-env.eba-rnrggvcq.eu-west-3.elasticbeanstalk.com/

And in the console you can see the full code

kthorngren

Looks like the problem is with this part of the code code:

    $.fn.dataTable.render.ellipsis = function () {
    return function ( data, type, row ) {
        return type === 'display' && data.length > 10 ?
            data.substr( 0, 4 ) +'…'+ data.substr( -4 ) :
            data;
    }
    // Array to track the ids of the details displayed rows

Looks like you are missing a closing }. I think it should look more like this:

    $.fn.dataTable.render.ellipsis = function () {
    return function ( data, type, row ) {
        return type === 'display' && data.length > 10 ?
            data.substr( 0, 4 ) +'…'+ data.substr( -4 ) :
            data;
        } // this is missing.
    }
    // Array to track the ids of the details displayed rows

Kevin

peter-werk

Sorry Im lost with the semicolons tried validators and nothing working I'm totaly lost with this

function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+'Hello1'+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+'Hello2'+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}
$(document).ready(function () {
$('#data').DataTable({
      "pageLength": 25,
      responsive: true,
      columns: [
        {data: 'null', className: "dt-control", orderable: false, "defaultContent": ''},
        {data: 'ranking', searchable: false},
        {data: 'player',orderable: false, render: $.fn.dataTable.render.ellipsis(), className: "no-wrap"},
        {data: 'id',orderable: false, searchable: false},
        {data: 'referrals', searchable: false},
        {data: 'total_structure', searchable: false},
        {data: 'deposits', searchable: false},
        {data: 'payouts', searchable: false},
        {data: 'airdrop_send', searchable: false},
        {data: 'airdrop_recived', searchable: false},
        {data: 'player', orderable: false, searchable: false, "mRender": function(data, type, full) {
          return '<a class="btn btn-info btn-sm" href=https://drip.community/faucet?buddy=' +  data + '>' + 'Join team' + '</a>';}}
      ],
      "order": [[1, 'dsc']]
    } );
    // function for address formating 
  $.fn.dataTable.render.ellipsis = function () {
    return function ( data, type, row ) {
      return type === 'display' && data.length > 10 ?
          data.substr( 0, 2 ) +'…'+ data.substr( -4 ) :
          data;
    };
  };
  // Add event listener for opening and closing details
  $('#data tbody').on('click', 'td.dt-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');
      }
    } );
} );

peter-werk

I was able to recreate my table with the problem here https://jsfiddle.net/b3cavdn4/24/

colin

Your code was badly formatted, the click event was in another function! I've tidied it up and it's working here as expected: https://jsfiddle.net/m8xL0d9c/

Colin