Ordering issue in building up a table

B!

Hi all,
I'm building up a table and with the initial loading of the page my data is loaded using a load_data(); function. (working fine)

load_data();
  function load_data(var_devicetype, var_location, var_available){
    var dataTable = $('#product_data').DataTable({
      "processing":true,
      "serverSide":true,
      "order":[],
      "ajax":{
        url:"load_data.php",
        type:"POST",
        data:{
          devicetype_id:var_devicetype,
          location_id:var_location,
          available:var_available,
          urlid:url_id
        }
      },
      "columnDefs":[
        {
          "targets":[3,4],
          "orderable":false
        },
        {
          //show device id or not
          "targets": [7],
          "visible": false,
          "searchable": false
        },
      ],
    });
  }

With an "$('#product_data tbody').on('click', 'tr', function () {" function I'm adding an extra row below where I clicked on a tr and load some external page to edit data using an ajax GET type.

    var table = $('#product_data').DataTable();
    $('#product_data tbody').on('click', 'tr', function () {
      var data = table.row( this ).data();
      var tr = $(this).closest('tr');
      var row = table.row(tr);
      if (row.child.isShown()) {
        row.child.hide();
        tr.removeClass('shown');
        $(this).css('background','');
      }
      else {
        //Show waiting animation when original row is clicked
        var check_tr = $(this).attr('role');
        if (check_tr == "row"){
          $('#loading_animation').show();
        }
        $.ajax({
          type: 'GET',
          url: "extradata.php?id="+data[7],
          success: function (response) {
            row.child( response ).show();
            $('#loading_animation').hide();
          },
          error: function (xhr, ajaxOptions, thrownError) {
            row.child( 'Error loading content: ' + thrownError ).show();
          }
        });
        tr.addClass('shown');
        $(this).css('background','#74B3DD');
      }
    } ); 

All this works fine, when I change my data using this extradata.php using a form I change the data and reload the page adding "?id=1" in the url where 1 is the id.
If the id is there the load_data() will create content with only 1 row, this works fine.
Also I have following function:

  if (url_id != "" && Number.isInteger(url_id)){
window.alert("url_id");
    //Show waiting animation when content is loaded
    $('#loading_animation').show();
    $.ajax({
      type: 'GET',
      url: "extradata.php?id="+url_id,
      success: function (response) {
        var cols = $('#product_data tr:last td').length;
        var content = '<tr><td colspan="'+cols+'">' + response + '</td></tr>';
        $('#product_data tr:last').after(content);
        $('#loading_animation').hide();
      }
    });
  }

If I do this then result looks good and I see my 1 row of the ID and the extra data using the last function.

If I now remove the window.alert("url_id"); then my table is messed up.
The result I get is that the extradatapage is added in the thead because the the data from the load_data is not yet printed on the screen, it only gets printed after this extradata is printed.

So my question is how can I force this extradata to be printed on screen before the extradata without having the alert?

kthorngren

Not sure I completely understand the problem. When does the last function run?

Datatables doesn't directly support what you are doing by adding content to the last row like that. But if it works for you then use it.

You will probably want to use something like drawCallback to run that function after each draw.

Or if you wanted to put that data in the footer you could use the footerCallback option.

Kevin

B!

Hi Kevin,

Thanks for the feedback.
Hope to make it more clear:
First I open the page and I get to see all data.
When I click on a row (using $('#product_data tbody').on('click', 'tr', function () { function) I insert a new row in wich a from is availble and I do a post to a new page, changing content and redirect to the same page now including an id in the url.
If this ID is there the load_data will only show 1 result.

This is shown and with the last function I'm trying to add a row with extra data but this is shown in the thead and not in tbody (messing up the table).
If the warning is there then table looks good as I want it (then it's added in tbody in the 1 row added by the load_data function). If the warning is not there then it ends up in the thead instead...

kthorngren

I understand that there seems to be a timing issue. If you want to make sure to run that function after the table data has been displayed then one option is to use the drawCallback to run the function.

Kevin

B!

Hi Kevin,
Thanks a lot!
In meantime I managed to work around it using the tfood you indicated.
Case closed.