Reload table with date picker

penguinol

I'm attempting to implement a date picker that will narrow down a set of data. For testing purposes when I load the page everything works perfectly. When I pick a different date the goal is to reload the table with the start and end dates from the date picker, but the Search button/function fails to reload the table.

JS:

$start_date = '12/27/2019';
$end_date = '12/27/2019';
$is_date_search = 'yes';

(function($){

$(document).ready(function() {
                var table = $('#table_ordersByDay').DataTable( {

                        dom: 'Brtip',
                                "ajax":{
                                        url:"php/table.date_ordersByDay.php",
                                        type:"POST",
                                        data:{is_date_search:$is_date_search, start_date:$start_date, end_date:$end_date}
                                },
                        columns: [
                                {
                                        "data": "orders.status"
                                },
                                {
                                        "data": "orders.arrivalDateTime"
                                },
                                {
                                        "data": "orders.studyDescription"
                                }
                        ],
                        "order": [[2, 'asc']]
                } );
        } );

}(jQuery));


                $('#search').click(function(){
                        $start_date = $('#start_date').val();
                        $end_date = $('#end_date').val();
                        if(start_date != '' && end_date !='')
                        {
                                $('#table_ordersByDay').DataTable().destroy();
                                $('#table_ordersByDay').DataTable().ajax.reload();
                        }
                        else
                        {
                                alert("Both Date is Required");
                        }
                });

HTML:

     <div class="input-daterange">
      <div class="col-md-4">
       <input type="text" name="start_date" id="start_date" class="form-control" />
      </div>
      <div class="col-md-4">
       <input type="text" name="end_date" id="end_date" class="form-control" />
      </div>
     </div>
     <div class="col-md-4">
      <input type="button" name="search" id="search" value="Search" class="btn btn-info" />
     </div>
    </div>

kthorngren

Maybe the problem is that you are destroying the Datataeble ($('#table_ordersByDay').DataTable().destroy();) without reinitializing it first. You probably just want to remove that line and let the ajax.relaod() process repopulate the table.

Kevin

penguinol

All right looks like it's working with:

                                "ajax":{
                                        url:"php/table.date_ordersByDay.php",
                                        type:"POST",
                                        data: function ( d ) {
                                                d.is_date_search = $is_date_search; 
                                                d.start_date = $start_date;
                                                d.end_date = $end_date;
                                        }
                                },