Use PHP Array As Data Source For DataTables

Question

I am new to jQuery and am attempting to use jQuery array as the datasource for the jQuery DataTable. The array is set-up exactly as I need, and I have verified such from using echo json_encode($data);

And this is the jQuery code I'm using....

<script type="text/javascript">
var information = <?php echo json_encode($data) ?>;
alert(information.toString());
    $(document).ready(function () {
        $('#my-table').dataTable({
            data: information,
            columns: [
                { title: 'Salesman' },
                { title: 'Office' },
                { title: 'Title' },
                { title: 'Salary' }
            ]
        });
    });
</script>

Answer 1

An example you have an array of variable in PHP :

<?php
$information = array(
    array("Salesman1" => "Harris 1","Title"=>"Consulting JavaScript Architect","Office"=>"Home","Salary"=>"500000.00"),
    array("Salesman2" => "Harris 2","Title"=>"Consulting JavaScript Architect","Office"=>"Home","Salary"=>"500000.00"),
    array("Salesman3" => "Harris 3","Title"=>"Consulting JavaScript Architect","Office"=>"Home","Salary"=>"500000.00"),
    array("Salesman4" => "Harris 4","Title"=>"Consulting JavaScript Architect","Office"=>"Home","Salary"=>"500000.00"),
    array("Salesman5" => "Harris 5","Title"=>"Consulting JavaScript Architect","Office"=>"Home","Salary"=>"500000.00")
);
?>

And we want to output it as JSON format using json_encode function:

<?php
 echo json_encode($information);
?>

Will producing this:

[{"Salesman":"Harris 1","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 2","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 3","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 4","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 5","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 6","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"}]

Now as you embed this result inside javascript variable:

var information = <?php echo json_encode($data) ?>;

In client browser it will generated like this:

var information = [{"Salesman":"Harris 1","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 2","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 3","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 4","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 5","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},{"Salesman":"Harris 6","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"}]

Above result is your javascript datasource. We use it with Datatables Data option. Some example in Datatables Javascript Sourced Data. It can be this can be arrays or objects.

When your PHP array got specific key index name, it will converted to same key in JSON object. So in Datatables this object key need to included inside columns.data option. You can use Datatables colums.title to set column name too.

$(document).ready(function () {
    $('#my-table').dataTable({
        data: information,
        columns: [
            { data: 'Salesman', title: 'Salesman' },
            { data: 'Office', title: 'Office' },
            { data: 'Title', title: 'Title' },
            { data: 'Salary', title: 'Salary' }
        ]
    });
});

See and run the demo snippet below:

var information = [
{"Salesman":"Harris Teeter","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},
{"Salesman":"Adam Smith","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},
{"Salesman":"Mirole","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},
{"Salesman":"Jave Mocha","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},
{"Salesman":"Airis","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},
{"Salesman":"Steve Mat","Title":"Consulting JavaScript Architect","Office":"Home","Salary":"500000.00"},
];

$(document).ready(function () {
    $('#my-table').dataTable({
        data: information,
        columns: [
            { data: 'Salesman', title: 'Salesman' },
            { data: 'Office', title: 'Office' },
            { data: 'Title', title: 'Title' },
            { data: 'Salary', title: 'Salary' }
        ]
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="my-table" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Salesman</th>
                <th>Title</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Salesman</th>
                <th>Title</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

Answer 2

Have you tried:

<script type="text/javascript">
var information = JSON.parse('<?php echo json_encode($data) ?>');
console.log(information);
    $(document).ready(function () {
        $('#my-table').dataTable({
            data: information,
            columns: [
                { title: 'Salesman' },
                { title: 'Office' },
                { title: 'Title' },
                { title: 'Salary' }
            ]
        });
    });
</script>

With console.log, you will see if your array is correctly parsed, and also using JSON.parse to pass your array from PHP to JS is a better practice in my experience, less risky for syntax errors.