No Records Found in Modal when datatable date filtered

kfrancis

Very much a newbie to datatable and cannot debug this one so looking for some help please.

I have a datatable which shows all results, so far so good.
I have a custom date range filter which filters data when selecting a date range, still all good.
When I clear the date range filter (displaying all records) and click a row the modal opens showing a 2nd query filtered by the row value clicked and the data is displayed in a datatable, still working as expected.
but..when I filter the datatable using the date filter and then click the same row I did previously the modal shows no records found.

Seems to be an issue when using the date range filter and turning the modal table into a datatable and I cannot figure it out.

Can anyone help? My script is below (sorry if not laid out very well).

//START MAIN DATATABLE 

$(document).ready(function() {
        var table = $('#production3').DataTable({
           
            "serverside" : true,
            "ajax": "../data/production3.php",
            "columns": [
            { "data": "Production Date" },
            { "data": "Patio" }
            ],
            
            responsive: true,

            dom: "<'toprow'<'col-md-6'<'toolbar'>> + <'col-md-6'f>>rt<'bottomrow'<'col-md-6'l><'col-md-6'p>>",

            paging:   true,
            info:     false, 
            fixedHeader: true,
            pageLength: 10,
            lengthMenu: [ [10, 15, 20, -1], [10, 15, 20, "All"] ],

        });

$("div.toolbar").html('<input class="form-control input-sm" id="date_range" type="text" size="30" placeholder="Select Date Range">');  

//START DATE RANGE PICKER

$("#date_range").daterangepicker({
    autoUpdateInput: false,
    locale: {
        "cancelLabel": "Clear",
        format: 'YYYY-MM-DD'
        },
            ranges: {
           'This Week': [moment().startOf('week'), moment().endOf('week')],
           'Next Week': [moment().add(7, 'days').startOf('week'), moment().add(7, 'days').endOf('week')],
           'This Week + O/S': [moment().startOf('month'), moment().endOf('week')],
           'Next Week + O/S': [moment().startOf('year'), moment().add(7, 'days').endOf('week')],
}
});

$("#date_range").on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('YYYY-MM-DD') + ' to ' + picker.endDate.format('YYYY-MM-DD'));
      table.draw();
});

$("#date_range").on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
      table.draw();
});

$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
    
    var grab_daterange = $("#date_range").val();
    var give_results_daterange = grab_daterange.split(" to ");
    var filterstart = give_results_daterange[0];
    var filterend = give_results_daterange[1];
    var iStartDateCol = 0; //using column 2 in this instance
    var iEndDateCol = 0;
    var tabledatestart = aData[iStartDateCol];
    var tabledateend= aData[iEndDateCol];
    
    if ( !filterstart && !filterend )
    {
        return true;
    }
    else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && filterend === "")
    {
        return true;
    }
    else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isAfter(tabledatestart)) && filterstart === "")
    {
        return true;
    }
    else if ((moment(filterstart).isSame(tabledatestart) || moment(filterstart).isBefore(tabledatestart)) && (moment(filterend).isSame(tabledateend) || moment(filterend).isAfter(tabledateend)))
    {
        return true;
    }
    return false;
});

//END DATE RANGE PICKER

//START CLICK FUNCTION ON DATATABLE ROW TO PASS VALUE CLICKED TO POP UP MODAL QUERY

$('#production3').on('click', 'tr', function () {
        var $id1 = table.row(this).data()['Production Date'];
    $('.modal-content').load('production3_0.php?id1='+$id1, function(){
        $('#epw_modal').modal({show:true});
    });
});

//END CLICK FUNCTION

});

//END MAIN DATATABLE

//START 2ND DATATABLE WITH DOM FOR POP UP MODAL

$('.def_modal').DataTable({

            dom: "<'toprow'<'col-md-6'B><'col-md-6'f>>rt<'bottomrow'<'col-md-12'p>>",

            buttons: ['copyHtml5','excelHtml5'],

        paging:   true,
            info:     false, 
            fixedHeader: true,
            pageLength: 10,
            lengthMenu: [ [10, 15, 20, -1], [10, 15, 20, "All"] ],
});

//END 2ND DATATABLE

//START POP UP MODAL DISPLAYED IN DATATABLE DEF_MODAL

<?php 
include 'connect.php';
$id1 = $_GET['id1'];

<?php
>


    
    ×
     
?>


    <div class="panel-body">
    <table width="100%" class="table def_modal table-striped table-bordered table-hover nowrap">
        <thead class="table-header">
            <tr class="table-nowrap"> 
                <th>Load Code</th>
                <th>Job Number</th>
                <th>Patios</th>           
            </tr>                                              
        </thead>
          
        <tbody>
          <?php

          $sql = "SELECT* FROM [Production]
                WHERE [Production Date] = '$id1'
                "; 
          $stmt = sqlsrv_query( $conn, $sql );

          if( $stmt === false) {
          die( print_r( sqlsrv_errors(), true) );
          }

          while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) { 
          ?>                    
            <tr class="table-nowrap"> 
                <td><?php echo $row['Load Code'] ?></td>
                <td><?php echo $row['Job Number'] ?></td>
                <td><?php echo $row['Patio'] ?></td>                         
            </tr>
          <?php   } ?>
        </tbody>
    </table>
    </div>
</div>
</div>

//END POP UP MODAL