Print Datatables from JS array that is JSON

Question

I got a JS var JSONarray that is initialized by PHP script that assign it a JSON value. I tried to use DataTables to format data and print it in readable form, but i cannot manage it to work. PHP code is working fine and I tried the data samples from DataTables site and it worked but with this JSON it is not working.

Here are my codes:

JSONarray

var JSONarray = [{
    "id": "ffd60d8e-4b2d-a693-bfcc-5959e202caa3",
    "nr_faktury": "FV\/45654fgh\/fh231",
    "nazwa_klienta": "klient3",
    "kwota": "6045.00"
    }];

JS

$(function() {
    $('#example').DataTable( {
                "ajax": JSONarray,
                columns: [
                    { title: "id" },
                    { title: "nr_faktury" },
                    { title: "nazwa_klienta" },
                    { title: "kwota" }
                ]
            } );
});

if your PHP script returns a JSON array, you should simply put the url to your script in the ajax properties. — Nicolas
– Nicolas, Commented Jul 3, 2017 at 17:34
The problem is that i'm using drupal and I don't know if this is even possible. I managed it to work by printing to div with display:none property and then reading it by JS. — karoluS
– karoluS, Commented Jul 3, 2017 at 17:43

Icarus · Accepted Answer · 2017-07-03 18:19:25Z

You can change the data source definition to use data instead of ajax since there's no Ajax call involved - you are writing out the JSONArray directly into the response when you load the page. You will also need to add a data property to the columns array. See full script below:

var JSONarray = [{
    "id": "ffd60d8e-4b2d-a693-bfcc-5959e202caa3",
    "nr_faktury": "FV\/45654fgh\/fh231",
    "nazwa_klienta": "klient3",
    "kwota": "6045.00"
    }];

$(document).ready(function(){
    $('#example').DataTable({
                data: JSONarray, //Replace JSONarray with data source URL
                columns: [
                    { data: "id", title:"id" },
                    { data: "nr_faktury", title: "nr_faktury" },
                    { data: "nazwa_klienta", title:"nazwa_klienta" },
                    { data: "kwota", title:"kwota" }
                ]
            });
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<table id='example'></table>

Hassan Imam · Accepted Answer · 2017-07-03 17:45:30Z

var JSONarray = [{
    "id": "ffd60d8e-4b2d-a693-bfcc-5959e202caa3",
    "nr_faktury": "FV\/45654fgh\/fh231",
    "nazwa_klienta": "klient3",
    "kwota": "6045.00"
    }];

$(document).ready(function(){
    $('#example').DataTable({
                "ajax": JSONarray, //Replace JSONarray with data source URL
                columns: [
                    { title: "id" },
                    { title: "nr_faktury" },
                    { title: "nazwa_klienta" },
                    { title: "kwota" }
                ]
            });
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<table id='example'></table>

I got alert Invalid JSON response. I can't use URL approach because i don't have access to PHP directly.
Then use data attribute in DataTable and after converting the JSON response into a valid one, bind it.

Collectives™ on Stack Overflow

Print Datatables from JS array that is JSON

Here are my codes:

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

Here are my codes:

2 Answers 2

Comments

2 Comments

Related