Jquery DataTable Error when rendering php Array to Client

Question

I have sent data json_encoded from a PHP Page:

$arrayForDataTablePopulation = array();

        while (($row = oci_fetch_array($stid, OCI_BOTH)) != false) {

                $a = trim($row["IDCONF"]);
                $b = trim($row["NOME"]);
                $c = trim($row["TIPOLOGIA"]);
                $d = trim($row["STATO"]);
                $e = trim($row["AMBIENTE"]);
                $f = trim($row["AGGREGATORE"]);
                $f2 = trim($row["NOMECED"]);
                $g = trim($row["MODELLO"]);
                $h = trim($row["CONTRATTO"]);
                $i = trim($row["VALIDADAL"]);
                $l = trim($row["VALIDAAL"]);

            if ($count < $NUM){

                $arrayForDataTablePopulation[$count] = "[" .  $a . "," .  $b . "," . $c . "," . $d . "," . $e . "," . $f . "," . $f2 . "," . $g . "," . $h . "," . $i . "," . $l . " ]";
                $count++;

            } else {

                $arrayForDataTablePopulation[$count] = "[" .  $a . "," .  $b . "," . $c . "," . $d . "," . $e . "," . $f . "," . $f2 . "," . $g . "," . $h . "," . $i . "," . $l . " ]";

            }

        }

        echo  json_encode($arrayForDataTablePopulation);

} else {

    echo "No data Received. Dimensione array: " . $receivedArrayFormSize;

}

I don't know why my ouput is bad rendered:

I think I have bad encoded the array from the server. The Ajax side is:

$.ajax({

                url: "asset_GestAsset.php",
                type: "POST",
                data: { "fieldValue" : JSON.stringify(arrForm) },
                success: function(data) {

                    var tableData = JSON.parse(data);

                    console.log(" Converti in stringhe: " + data.toString() + " !!! Everything ok");

                    $('#OUTCOME_RESEARCH_TABLE').DataTable({
                         "aaData":tableData,
                         "deferLoading": 57,
                         "deferRender": true,
                         "scrollY": 150,
                         "iDisplayLength": 100,
                         "scrollX": true,
                         "bRetrieve": true,
                         "bDestroy": true,
                         "ordering": false,
                         "info":     true,
                         "sDom":     'ltipr',
                         "bDestroy": true

                 });

etc...

The problem is I am confused with all this Array/JSON stuff I think I have a lot of confusion in my mind right now xD Someone could please help me to find out a workaround to solve this problem? Is the PHP side wrong or the code in the AJAX?

What I would like to do is to modify the server array, send back to the client and render the DataTable properly.

Answer 1

PHP

You should use the code below to populate the array:

$arrayForDataTablePopulation[$count] = array($a, $b, $c, $d, $e, $f, $f2, $g, $h, $i, $l);

To print the JSON use the code below:

header('Content-type: application/json');
echo json_encode($arrayForDataTablePopulation);

JS

Use the code below inside success handler:

$('#OUTCOME_RESEARCH_TABLE').DataTable({
     "dom": 'ltipr',
     "data": data,
     "pageLength": 100,
     "scrollY": 150,
     "scrollX": true,
     "ordering": false
});