JSONP data source clarification

faridsk

I am trying to load data from a remote source and I followe exactly what is mentioned on the link
https://datatables.net/examples/server_side/jsonp.html

But I cannot get it to work. It says invalid JSON. WHat I noticed is that on the link above under the ajax tab the sample data is shown as

{
  "draw": 1,
  "recordsTotal": 57,
  "recordsFiltered": 57,
  "data": [
    [
      "Airi",
      "Satou",
      "Accountant",
      "Tokyo",
      "28th Nov 08",
      "$162,700"
    ],

But this is not valid JSONP data it is just regular JSON. So If I have to upload this same data on the remote server what should it look like for JSONP? some examples show that it should be enclosed in a callback function like

callback_1234({......});

but if I do that then what change do I need to make on the javascript side of

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "scripts/jsonp.php",
            "dataType": "jsonp"
        }
    } );
} );

tangerine

Are you using the serverside script from the example?

faridsk

The data is being provided to me by backend developers. But before I ask them to make any changes I need to know if I need to make any changes to the javascript on the fron-end.

tangerine

Your code above refers to:

"url": "scripts/jsonp.php",

Is that the serverside script from the example?

faridsk

The actual data is this
http://dev.cehtp.org/api/water/search/systems

I know it is not JSONp and simply JSON but before I ask them to wrap it in a callback function I need to know what changes I need to make on the frontend javascript too

tangerine

I already asked you the same question twice. Let's try one more time in different words.
What is "url": "scripts/jsonp.php" doing in your code?

faridsk

It is not my code. it is the sample code from the datatables.net example
https://datatables.net/examples/server_side/jsonp.html

My code is this exact same copy of that code with just a different url:

$(document).ready(function() {
    $('#example').dataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "http://dev.cehtp.org/api/water/search/systems",
            "dataType": "jsonp"
        }
    });
});

kthorngren

Tangerine is asking if your jsonp.php script has the callback code like the example you linked. Look at the Server-side script tab. For example:

// Validate the JSONP to make use it is an okay Javascript function to execute
$jsonp = preg_match('/^[$A-Z_][0-9A-Z_$]*$/i', $_GET['callback']) ?
    $_GET['callback'] :
    false;
 
if ( $jsonp ) {
    echo $jsonp.'('.json_encode(
        SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
    ).');';
}

I looked at your JSON response and while the format is valid the data structure for Datatables server side processing is not. Here is your JSON data:

{
    "total": 10,
    "rows": [{
        "id": "CA0707560",
        "name": "010 050 003",
        "district": "LPA37 - CONTRA COSTA COUNTY",
        "completed": false,
        "boundaries": 0,
        "verified": false,
        "validFrom": null,
        "validTo": null,
        "createdBy": null,
        "dtCreated": null,
        "dtVerified": null,
        "geoJson": "{\"type\":\"FeatureCollection\",\"totalFeatures\":0,\"features\":[],\"crs\":null}"
    }, {
        "id": "CA0706104",
        "name": "099 152 022 PG&E  LOS MEDANOS",
        "district": "LPA37 - CONTRA COSTA COUNTY",
        "completed": false,
        "boundaries": 0,
        "verified": false,
        "validFrom": null,
        "validTo": null,
        "createdBy": null,
        "dtCreated": null,
        "dtVerified": null,
        "geoJson": "{\"type\":\"FeatureCollection\",\"totalFeatures\":0,\"features\":[],\"crs\":null}"
    }, 
....

This page explains the format expected. Instead of "total": 10, the JSON data should contain something like this:

    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,

The standard for Datatables is to return the data in a data object where you are using rows. If you want to use rows then you need to use ajax.dataSrc to change from the default of data.

If you go to the example you referenced, open the browser's developer tools and go to network you can see that the callback is in the URL for jsonp.php with the JSON response.

Kevin

allan

I can't add much to what Kevin and @tangerine have already said, as they are excellent answers, but I should point out that in the JSONP example that you linked to, you rightly point out that the Ajax tab shows plain JSON rather than JSONP. That's because it uses the DataTables API to get the data returned from the server, which is just the plain JSON data, rather than with the callback function.

If you use the "Network" panel in your browser's extension you would be able to see it actually looks like:

jQuery112402886650803024111_1498123048357({
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        ["Airi", "Satou", "Accountant", "Tokyo", "28th Nov 08", "$162,700"],
        ["Angelica", "Ramos", "Chief Executive Officer (CEO)", "London", "9th Oct 09", "$1,200,000"],
        ["Ashton", "Cox", "Junior Technical Author", "San Francisco", "12th Jan 09", "$86,000"],
        ["Bradley", "Greer", "Software Engineer", "London", "13th Oct 12", "$132,000"],
        ["Brenden", "Wagner", "Software Engineer", "San Francisco", "7th Jun 11", "$206,850"],
        ["Brielle", "Williamson", "Integration Specialist", "New York", "2nd Dec 12", "$372,000"],
        ["Bruno", "Nash", "Software Engineer", "London", "3rd May 11", "$163,500"],
        ["Caesar", "Vance", "Pre-Sales Support", "New York", "12th Dec 11", "$106,450"],
        ["Cara", "Stevens", "Sales Assistant", "New York", "6th Dec 11", "$145,600"],
        ["Cedric", "Kelly", "Senior Javascript Developer", "Edinburgh", "29th Mar 12", "$433,060"]
    ]
});

Sorry for the confusion.

Allan