Issue : Filtering + Row Details

tanguypam

Hi, I have been using Datatables for 2 months now and I love it, it's awesome all we can do with these features.

Now I have an issue when I use both functions Filtering (via ajax) and row details simultaneously. When I use the one or the other, everything works fine.

I added row details to make changes to the row in question. Indeed, inputs are in the row details.

So, this is the error i got when i first filter the table and then attempt to open a row detail :

I got the var id with the datatable data from ajax :

   $data[] = array(
     "lb_type" => getLinkTypeFromId($row['lb_type']),
     "lb_user" => getUserFromId($row['lb_userid']),
     "lb_url" => "<a href=".$row['lb_url']." target='_blank'>".$row['lb_url']."</a>",
     "lb_title" => $row['lb_title'],
     "lb_kw" => $row['lb_kw'],
     "lb_anchortype" => getAnchorTypeFromId($row['lb_anchortype']),
     "lb_orderdate" => date("Y-m-d",strtotime($row['lb_orderdate'])),
     "lb_provider" => $row['lb_provider'],
     "lb_words" => $row['lb_orderwords'],
     "lb_delivdate" => $row['lb_delivdate'],
     "lb_publisdate" => $row['lb_publishdate'],
     "lb_anchor" => $row['lb_anchor'],
     "lb_cpurl" => $row['lb_cpurl'],
     "lb_topicmatch" => $row['lb_topicmatch'],
     "lb_dr" => $row['lb_dr'],
     "lb_cost" => $row['lb_cost'],
     "id" => $id,
   );

this is my filtering function that i call at each opening of the page (w/o values) and with values when filtering options are set :

function LBuilderTableFiltering(user='',type='',provider='',asset='',cat='',subcat='',starttime='',endtime='',progress=''){
    var dttable = $('#ViewLBuilderTable').DataTable({
      "processing" : true,
      "serverSide" : true,
      "order": [[ 7, "desc" ]],
      lengthChange: false,
      dom: 'Bfrtip',
      buttons: [
        'copy',
        'excel',
        'csv',
        {
          extend: 'colvis',
          collectionLayout: 'fixed three-column'
        }
      ],
      "ajax" : {
        url:"ajax/fetchLBuilder.php",
        type:"POST",
        data:{
          user:user,type:type,provider:provider,asset:asset,cat:cat,subcat:subcat,starttime:starttime,endtime:endtime,progress:progress
        },
        // success:function(data){
        //   console.log(data);
        // }
      },
      'columns' : [
        {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
        },
       { "data": 'lb_type' },
       { "data": 'lb_user' },
       { "data": 'lb_url' },
       { "data": 'lb_title' },
       { "data": 'lb_kw' },
       { "data": 'lb_anchortype' },
       { "data": 'lb_orderdate' },
       { "data": 'lb_provider'},
       { "data": 'lb_words'},
       { "data": 'lb_delivdate'},
       { "data": 'lb_publisdate'},
       { "data": 'lb_anchor'},
       { "data": 'lb_cpurl'},
       { "data": 'lb_topicmatch'},
       { "data": 'lb_dr'},
       { "data": 'lb_cost'},
      ],
      "columnDefs": [
        { "orderable": false, "targets": 1},
        { "visible": false, "targets": [9,14,15] }
      ]
    });
    // Add event listener for opening and closing details
    $('#ViewLBuilderTable tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dttable.row(tr);

        console.log(dttable.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');
        }
    });
  }

and this is my format function :

function format (d) {
  var itemTpl = $('script[data-template="toggletrtemplate"]').text();
  var id=d.id;
  itemTplmod = itemTpl;
  itemTplmod = itemTplmod.split('${id}').join(id);
  return itemTplmod;
}

(I've got a row detail template for which I just change the id of all the input)

So, to sum up : When I open the page, and open the row details, it works, but when I filter, AND I open the row details, it doesn't open and I got the error with the unknown id.

If you have any idea to sole this issue, it would be awesome !!

If you want more information, just tell me, I will give you

Thank you very much

kthorngren

Sounds like when you apply the filter the server script is not returning the id object as part of the data. You can verify by looking at the browsers Developer Tools > Network. Look at the Preview or Response tabs to see what is returned.

Or you can use console.log( d ); in your format function to see if d has an object id.

Let us know what you find.

Kevin

tanguypam

So, yes, when I put console.log(d) in the format function :
- Before filtering it gives me the array with the id
- After filtering, d is undefined

kthorngren

Are you calling LBuilderTableFiltering multiple times? If you are then do you need server side processing since you are using a filter? Maybe use an external ajax call and initialize Datatables once.

Can you provide a link to your page or a test case so we can see the flow of your script?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

My guess is the problem has less to do with Datatables and more about the flow of your script and calling LBuilderTableFiltering more than once to filter the table.

Kevin