传递图像以通过JSON和PHP在datable中显示

时间:2017-05-30 21:50:17

标签: php jquery html json ajax

我正在通过ajax填充数据表,通过PHP / Mysql创建的JSON请求信息。数据传输还可以,直到我想把照片放在桌子上。见代码:

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"]]}

*******这些空间中的值不为空。 json_encode命令正在尝试在屏幕上打印图像。

我从谷歌浏览器的检查中选择了一条线:

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

2 个答案:

答案 0 :(得分:1)

您应该转换应用于HTML实体的所有字符,而不是返回直接在json中编码的html代码。 htmlentities功能 @see:http://php.net/manual/en/function .htmlentities.php

而不是返回表中行的html代码,可以返回一个JSON对象,其列名作为属性键,列值作为该属性的值。

Json应该是这样的:

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

然后,javascript会将获取的数据填入表中的html标签中。这将有助于您的服务器在准备大量数据以返回客户端时缩短处理时间。

看看datatables.net上的例子 enter image description here

访问https://datatables.net/reference/option/ajax了解更多详情。

答案 1 :(得分:0)

我使用每个人的信息为我工作,我使用了其他帖子的引用,就像Maheshed的回答一样,但是使用像Zuko这样的json说。

所以,解决方案是:

PHP(新):

$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是(示例结果):

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

JQUERY(新):

      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"}
        ]
      } );