Passing images to display in datable through JSON and PHP

Question

I am populating a of a datatable by ajax, requesting information via JSON, created by PHP / Mysql. The data transmission was okay until the time I wanted to put a picture on the table. See the codes:

HTML:

  <table id="mytable">
  <thead>
    <tr>
      <th>Id</th>
      <th>Flag</th>
      <th>Country</th>
      <th>Language</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

PHP:

 $sql = "SELECT * FROM countries";
            $result = mysqli_query($mysqli, $sql);
            $data = array();
            while($row = mysqli_fetch_assoc($result)) {
                //The problem is in the line below:::   
                $flag= '<img src="img/flags/'.$row['country_flag'].'" border="0">'; 
                $data[] = array($row['country_Id'], $flag, $row['country_name'], $row['country_language']);
            }
            echo json_encode(array('data' => $data));

JQUERY:

    <script>
          var drow = $('#mytable').DataTable({
            "ajax": "sql/countries_sql.php"
          });
    </script>

ANSWER JSON:

{"data":[["24","*******","ALEMANHA","3"],["22","","ARGELIA","3"],["9","","ARGENTINA","2"],["17","","BOLIVIA","2"],["8","","BRASIL","1"],["25","","CANADA","2"],["20","","CHILE","2"],["11","","COLOMBIA","2"],["18","","EL SALVADOR","2"],["14","","EQUADOR","2"],["15","","GUATEMALA","2"],["10","","MEXICO","2"],["19","","PARAGUAI","2"],["13","","PERU","2"],["23","","PORTO RICO","2"],["21","","REPUBLICA DOMINICANA","2"],["12","","URUGUAI","2"],["16","","VENEZUELA","2"]]}

******* The value in these space are not null. The json_encode command, is trying to print the image in screen.

I've took a line from inspection of google chrome:

<img src="\&quot;..\/img\/bandeiras\/Argelia_flat.png\&quot;" border="\&quot;0\&quot;">

what is the error you get and what is the img src="" filled with ? — Simos Fasouliotis, May 30 '17 at 21:51
Possible duplicate of https://stackoverflow.com/questions/34942662/jquery-datatables-display-image-in-one-of-the-columns — Mahesh Singh Chouhan, May 30 '17 at 22:03
Gives me a alert error on datatable plugin...and do not exibit any data! — GilbertJ, May 30 '17 at 22:31
If I take the column off...and change php to do not send the image, works fine! — GilbertJ, May 30 '17 at 22:32
`I am populating a of a datatable by ajax, requesting information via JSON, created by PHP / Mysql.` That statement alone causes a lot of confusion. Ajax (actually Javascript) requests data via POST, server can respond in JSON and Javascript understands that and you script it to update the fields where necessary. The whole picture is called Ajax, not a single request. — Xorifelse, May 30 '17 at 23:31
Okay. Sorry for the mistake in formulating the question. Actually I am pulling the table values via JSON, which generated with PHP (json_encode). As all system page are already in the standard datatable plugin, I would not like to make a single different. When I bring the information without the image ( — GilbertJ, May 30 '17 at 23:41
You do not provide enough information for an answer. Can you update your answer with the JSON you're getting? — Xorifelse, May 31 '17 at 00:37

score 1 · Answer 1 · answered May 31 '17 at 02:18

Instead of returning the html code directly encoded in json, you should convert all the characters applied to the HTML entities. htmlentities function @see: http://php.net/manual/en/function .htmlentities.php

And instead of returning the html code of a row in a table, it is possible to return a JSON object with column name as a property key and the column value as the value of that property.

the Json should look like this :

[
  {
    "Id": 1,
    "Flag": "img/flags/us.png",
    "Country": "US",
    "Language": "EN" 
  },
  {
    "Id": 2,
    "Flag": "img/flags/us.png",
    "Country": "US",
    "Language": "EN" 
  }
]

And then, javascript will fill the data obtained into the html tags in the table. This will help your server reduce the processing time when preparing large amounts of data to return to the client.

Take a look the example from datatables.net

Visit https://datatables.net/reference/option/ajax for more detail.

score 0 · Accepted Answer · answered May 31 '17 at 17:48

I made it work for me using informations of everyone, I've used the reference of other post, just like Maheshed answer, but using the json like Zuko said.

So, the solution is:

PHP (New):

$sql = "SELECT * FROM ve_country";
        $result = mysqli_query($mysqli, $sql);
        $data = array();
        while($row = mysqli_fetch_assoc($result)) {
            $data[] = array(
                "Id"=>$row['country_Id'],
                "Flag"=> $row['country_flag'],
                "Country"=> $row['country_name'],
                "Language"=>$row['country_language']
            );
        }
        echo json_encode($data); //before was: echo json_encode(array('data' => $data));

JSON is (example results):

[
  {
    "Id": 1,
    "Flag": "img/flags/us.png",
    "Country": "US",
    "Language": "EN" 
  },
  {
    "Id": 2,
    "Flag": "img/flags/us.png",
    "Country": "US",
    "Language": "EN" 
  }
]

JQUERY (New):

      function getImg(data, type, full, meta) {
        var orderType = data.OrderType;
        return '<img src="img/bandeiras/'+data+'" border="0" widht="25" height="25" />';
      }

      var drow = $('#mytable').dataTable( {
        "processing" : true,
        "ajax" : {
          "url" : "sql/countries_sql.php",
          dataSrc : ''
        },
        "columns" : [
          {"data" : "Id" },
          {"data" : "Flag", render: getImg},
          {"data" : "Country"},
          {"data" : "Language"}
        ]
      } );

Passing images to display in datable through JSON and PHP

2 Answers2