using initComplete

jkrobbins

From the api docs, I thought this would run when the table was finished drawing, but it's only running during page load. Here's my table def

  var dataTable = $('#resulttable').DataTable({
    'initComplete': function() {
      console.log('init completed');
      $('#datesubmit').prop('disabled', false);
    },
    'ordering': false,
    'pageLength': 25,
    'autoWidth': false,
    'jQueryUI': true,
    'scrollCollapse': true,
    'pagingType': 'full_numbers',
    'columns': [
      {data: '0', title: 'Date'},
      {data: '1', title: 'Dept'},
      {data: '2', title: 'Treatment'},
      {data: '3', title: 'Team'},
      {data: '4', title: 'Unit'},
      {data: '5', title: 'Shift'},
      {data: '6', title: 'Dept Charged'},
      {data: '7', title: 'Calendar Crew'},
      {data: '8', title: 'Area Mgr Charged'},
      {data: '9', title: 'Area Mgr'},
      {data: '10', title: 'Weight'},
      {data: '11', title: 'Defect Code'},
      {data: '12', title: 'Description'},
      {data: '13', title: 'Team Charged'}
    ]
  });

Why is the "init completed" message appearing during page load but not after the ajax request which creates the table?

allan

You don't have any ajax options in your configuration object above, so DataTables isn't making any Ajax calls.

Allan

jkrobbins

The Ajax call is made from a button click after the user inputs a date range. Is there any way for me to tell when the table is finished so I can re-enable the button? At this point I've resorted to using drawCallback but that fires with every sort or page. It still works okay but that seems like a terrible hack. btw, I've tried using "complete" from the Ajax function, but that enables the button too soon as DataTables is still rendering.

allan

Since you don't have a ajax option in your configuration the table's initialisation is synchronous. I think what you really want is to know when your own Ajax call completes.

That's I can't tell you since I don't now how you are making that Ajax call and it is external to DataTables.

Allan

jkrobbins

It seems that the root of the problem is that my Ajax call doesn't know about DataTables and vise-versa. Is there a way to make them work together? I've look at the ajax api and don't see a way to make DataTables wait for user input before building the table. My Ajax almost always looks like this:

function runAjax() {
    console.log('running ajax');
    $('#datesubmit').prop('disabled', true);
    $('#waitimgdiv').fadeIn(1500);
    $('#tablediv').fadeOut(500);
    $('#excelspan').empty();
    return $.ajax({
      url: '/mfgweb/FrictionWasteReport',
      type: 'get',
      cache: 'false',
      datatype: 'json',
      data: {
        fromdate: $('#fromdatehdn').val(),
        todate: $('#todatehdn').val()
      },
      success: function(results) {
        dataTable.rows.add(results);
        var params = $('.paramfield').serialize();
        var excelimg = '<a href="/mfgweb/FrictionWasteReport?action=export&' + params + '" ' + 'target="_self">';
        excelimg = excelimg + '<img id="excelimg" title="Export to Excel" src="/mfgweb/common/images/ms_excel_icon.gif"></a>';
        $('#excelspan').append(excelimg);
      },
      complete: function() {
        console.log('running complete function');       
        $('#waitimgdiv').hide();
        $('#tablediv').fadeIn(1000);
         dataTable.columns.adjust().draw();
//        $('#datesubmit').prop('disabled', false);
      }
    });
  }

How can I get better integration between this and DataTables?

allan

In your success or complete methods can you not just change your button's state there? At that point the data will have been loaded into the DataTable.

Allan

jkrobbins

I've tried, but the button enables too quickly; the table is still being rendered and the user can click the button again and start another request. The closest I can get is to use show and hide instead of fadeIn and fadeOut, and also replace the initComplete with drawCallback. That works, but it fires when it's not needed (sorts, paging, etc) and it seems like an ugly hack that is relying on timing and luck to work correctly. I was hoping to find a way to wrap all this in a function with a callback, so I know the Ajax is complete and the table is completely rendered and displayed before enabling the button.

I've even been reading about Deferreds to see if there is some way to use that, but it's a complex topic. I admit that I don't fully understand it.

I haven't given up yet. There has got to be a way to make this work the way I want it to.

btw, I really appreciate your help on this.

allan

You are fading the table in - you can use the callback option that jQuery provides to execute the button handler state change there once the fade in is complete.

Allan