Mapping json response array and reloading ajax

Mapping json response array and reloading ajax

kputchakputcha Posts: 9Questions: 1Answers: 0

I have a date selector used for a "WHERE" condition in a SELECT statement...the json encoded result is received back to the ajax calling script.for loading the datatable.
1) HTML table

Member Name Cash Check Check Detail Credit Card Paypal Click on Receipt

2) js
$(document).on("click","#btnSubmitDateSummary",function() //Click a submit button after selecting the date
{
var summaryDate = $("#summaryDate").val(); //MM/DD/YYYY
var url_get_data = "xxxxxxxx/get_day_summary.php?summaryDate=" + summaryDate;

  var table = $('#table_members').DataTable({
    "retrieve": true,  //table will be reloaded with different data
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
    "responsive": true,
    "autoWidth": false,
    "pageLength": 10,
     "columns": [
    { "data": "name" },
    { "data": "cash" },
    { "data": "check_amount" },
    { "data": "check_detail" },
    { "data": "creditCard" },
    { "data": "paypal_amount" },
    { "data": "test" }
    ]
  });
 table.ajax.url(url_get_data).load(); 

});

3)json response is good and as expected:
{"name":"Leota Dilliard","cash":"45","check_amount":"0","check_detail":"","creditCard":"0","paypal_amount":"0","test":"test"}

Success: can select different dates, and will get different response...that is good.
Failure : No data in the table..."No data available in table"

What am I doing wrong ?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,627Questions: 26Answers: 4,831
    edited December 2017

    Datatables expects the JSON to be returned in an object called data by default. It also expects the data to be returned in an array. More info here:
    https://datatables.net/manual/data/

    I haven't created a test case to try this but you first might try returning your JSON in an array, like this:

    [
    {"name":"Leota Dilliard","cash":"45","check_amount":"0","check_detail":"","creditCard":"0","paypal_amount":"0","test":"test"}
    ]
    

    If that doesn't work then try returning in a data object:

    {
    data: [
    {"name":"Leota Dilliard","cash":"45","check_amount":"0","check_detail":"","creditCard":"0","paypal_amount":"0","test":"test"}
    ]
    }
    

    Kevin

  • kputchakputcha Posts: 9Questions: 1Answers: 0

    Kevin,

    I AM getting the response as an array

    {"name":"Leota Dilliard","cash":"45","check_amount":"0","check_detail":"","creditCard":"0","paypal_amount":"0","test":"test"}

    This is the result of the php page that is called:

    $name= $data['first_name'] . " " . $data['last_name'];
    $array['name']= $name;
    $array['cash']= $data['cash'];
    $array['check_amount']= $data['check_amount'];
    $array['check_detail']= $data['check_detail'];
    $array['creditCard']= $data['creditCard'];
    $array['paypal_amount']= $data['paypal_amount'];
    $array['test']= "test";

    echo json_encode($array);

    cannot understand why the table is empty...

  • kputchakputcha Posts: 9Questions: 1Answers: 0

    Also tried a data object..
    // in php page
    $datax = array('data' => $array);
    echo json_encode($datax);

    Now my json response looks like this:
    {"data":{"name":"Leota Dilliard","cash":"45","check_amount":"0","check_detail":"","creditCard":"0","paypal_amount":"0","test":"test"}}

  • kthorngrenkthorngren Posts: 20,627Questions: 26Answers: 4,831
    Answer ✓

    An array has [] around the data like my first example. Your examples aren't arrays. The array is needed to encapsulate more than one row. Even though you are only returning one row it still needs to be in an array.

    Kevin

  • kputchakputcha Posts: 9Questions: 1Answers: 0

    Thank you Kevin,
    The "array" did not work.
    The data object worked.
    Thanks

This discussion has been closed.