Ajax is not calling php page for datatable

Question

I am testing out the php and datatable together. I have first design a simple table as

<table id="activeDriverGrid"  name='activeDriverGrid'  class="table table-striped table-bordered bootstrap-datatable datatable ">
                          <thead>
                              <tr>
                                  <th>Driver Name</th>
                                  <th>CNumber</th>                                
                              </tr>
                          </thead>   

                      </table> 

Just to confirm I have this script

<script src='js/jquery.dataTables.min.js'></script>

At last below I call this.

<script type="text/javascript" language="javascript" >
            $(document).ready(function() {
                alert("calling");
                 $('#activeDriverGrid').dataTable({
            "bDestroy": true
        }).fnDestroy();

                var dataTable = $('#activeDriverGrid').DataTable( {
                    "processing": true,
                    "serverSide": true,
                    "ajax":{
                        url :"getData.php", // json datasource
                        type: "post",  // method  , by default get
                        success: function (data) {
                 alert("sucess");
            },
                        error: function(){  // error handling
                            $(".activeDriverGrid-error").html("");
                            $("#activeDriverGrid-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
                            $("#activeDriverGrid-grid_processing").css("display","none");

                        },
                        "bDestroy": true
                    }
                } );
            } );
        </script>

Here is my script for the getData.php

try {

        $requestData= $_REQUEST;


        $columns = array( 
        // datatable column index  => database column name
            0 =>'driverID', 
            1 => 'driverName',
            2=> 'driverContactNumber'
        );


         $nestedData=array(); 

         $nestedData[] = "Allan";
         $nestedData[] = "2214141";

         $data[] = $nestedData;

        $totalData=1;
    $totalFiltered = $totalData;
        $json_data = array(
            "draw"            => intval( $requestData['draw'] ),   // for every request/draw by clientside , they send a number as a parameter, when they recieve a response/data they first check the draw number, so we are sending same number in draw. 
            "recordsTotal"    => intval( $totalData ),  // total number of records
            "recordsFiltered" => intval( $totalFiltered ), // total number of records after searching, if there is no searching then totalFiltered = totalData
            "data"            => $data   // total data array
            );

    echo json_encode($json_data);  // send data as json format

}
catch(PDOException $pe)
{
        die("Error In Get Active Drivers :" . $pe->getMessage());
}   

I have manually called this page and the results is {"draw":0,"recordsTotal":1,"recordsFiltered":1,"data":[["Allan","2214141"]]} thus it confirms its working. I have run the profiling tool in google chrome I dont see in the Network the getData.php is being called but the pop-up calling appears.

Answer 1

Try this

  <script type="text/javascript" language="javascript" >
            $(document).ready(function() {
                alert("calling");
                 $('#activeDriverGrid').dataTable({
            "bDestroy": true
        }).fnDestroy();

                var dataTable = $('#activeDriverGrid').DataTable( {
                    "processing": true,
                    "serverSide": true,
                    });
                     $.ajax({
                        url :"getData.php", // json datasource
                        type: "post",  // method  , by default get
                        data:{data:dataTable},
                        success: function (data) {
                 alert("sucess");
            },
                        error: function(){  // error handling
                            $(".activeDriverGrid-error").html("");
                            $("#activeDriverGrid-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
                            $("#activeDriverGrid-grid_processing").css("display","none");

                        },
                        "bDestroy": true
                    })
                } );

        </script>