jQuery dataTable error on initialize when inside bootstrap 3 modal

A dataTable is being loaded inside the main PHP web page and a column renders a[data-toggle="modal"] a href that also has a unique class custs which is needed because there are two columns that load modals.

The one modal is a simple ajax call which works fine, but the second modal which is supposed to load a nested dataTable has trouble capturing the parameters when the dataTable is initialized. I know the AJAX call works because I hardcoded the values inside the JSON provider program which renders the table as expected.

I have read several SO questions on the subject like this and have tried the following delegation methods in the callback in the dataTable loaded on the main PHP web page:

"fnDrawCallback": function( oSettings ) {
$('#table_001').on('click','.custs', function(e){
$($(this).data("target")+' .modal-body').load($(this).data("remote"));
$("#customers").modal('show');
}); 

AND

  $('#table_001 .custs').each(function(k,v) {
      $(this).on('click', function(e){
      $($(this).data("target")+' .modal-body').load($(this).data("remote"));
      $("#customers").modal('show');
      });   
  });
}

I even tried making the modal remote so I can initialize the nested dataTable on the remote web page's document.ready and pass the paramters via $_GET among many other things (including wrapping the initialize function in a setTimeout) and no matter what I do I can't prevent the dataTable from initializing before the modal has finished loading and the event listener gains control in order to capture the parameters needed to load the nested dataTable via its "ajax" : option.

ERROR

I know for certain the parameters are there because I can view them in the console.log:

//initialize customer table
var InitCustTable = function(aid){
   var oTable2 = $('#table_002').dataTable( {
    "processing": true,
    "serverSide": true,
    "deferRender": true,
    "bFilter": false,
    "bLengthChange": false,
    "ajax": {
        "url": "http://portal.hthackney.com/rest/WEB055L3",
        "data": function (d) { // pass additional pameters                   
                    d.user = user;  
                    d.instance = "HTHACKNEY"; 
                    d.fscode = fscode;
                    d.atnid = aid;
                    d.cols = "7"; // TOTAL <td> tags per <tr> tag
                    console.log(d);  
        },

I currently invoke the modal like this:

To me it seems like the Event Handlers are properly bound to the anchors so there must have to be some sort of workaround?

I use the TableAdvanced.init('Y'); method to intiialize the nested dataTable and inside the draw event handler I use TableAdvanced.init('N');. I have tried destroying the dataTables, usingbs.modal.hidden and/or destroying/initializing it on bs.modal.shown etc and nothing.

I have created a Singleton js app so I call this app inside the document.ready of the remote modal (modal_attendee_custs.php):

Events.customerModal('<? echo $_GET["atnid"]?>', '<? echo $_GET["whsno"] ?>');

I am almost to the point where I am going to just convert the dataTable into a boostrap grid table and hide the columns based on width. The only reason I really need the dataTable is to use the row-details drop-down column placeholder. I don't need any sort or filters outside of my parameters it just would be nice to solve the problem without a workaround. Any help would be greatly appreciated!