如何使用 jQuery DataTables 在表格中显示图片答案

【问题标题】：How to show pictures in a table using jQuery DataTables如何使用 jQuery DataTables 在表格中显示图片
【发布时间】：2023-04-02 03:31:01
【问题描述】：

我可以在数据表中显示我的 URL 图像吗？我在数组中返回我的数据，如代码中所示，并返回 URL 图像...

在我知道 DataTables 之前，我使用的是默认表并将我的表放在 <img src=""> 中，那么我该如何在这里使用它？

<?php	
class basket_report{
function show_basket_report(){
	$connect_mysql= @mysql_connect($server,$username,$passwor) or die ("Connection Failed!");
	$mysql_db=mysql_select_db("GP15",$connect_mysql) or die ("Could not Connect to Database");
	$query = "SELECT * FROM reportBasket where notifyEmployee='1'";
	$result=mysql_query($query) or die("Query Failed : ".mysql_error());
	$objects= array();
    while($rows=mysql_fetch_array($result))
    {
                    $objects[]= $rows;
    }
	$data_set = "[";
    $count_rows = count($objects);
    $count = 1;
    foreach($objects as $object){
       $data_set .= "['". $object['reportID'] ."', '". $object['email'] ."', '". $object['date'] ."', '". $object['time'] ."', '". $object['BasketID'] ."', '". $object['notifyEmployee'] ."','". $object['replyedPhoto'] ."']";
        if($count != $count_rows){
            $data_set .= ",";
            $count++;
        }
    }
    $data_set .= "]";
		return $data_set;
	}
?>

<html>
<head>
<script src="js/jquery-1.11.1.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="DataTables-1.10.7/media/css/jquery.dataTables.css">
  
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.7/media/js/jquery.js"></script>
  
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.7/media/js/jquery.dataTables.js"></script>
<script>
 
$(document).ready(function() {
 
    $('#table_id').dataTable( {
        "data": dataSet,
        "columns": [
            { "title": "report_id" },
            { "title": "email" },
            { "title": "date" },
            { "title": "time"},
			{ "title": "basket_id"},
			{ "title": "notify_Employee"},
				{ "title": "replyed_photo"}
		
        ]
    } );   
} );
</script>
</head>
<body>
<table id="table_id" class="display">
 
</table>
<?php
include('class_report_basket.php');
$basket_report = new basket_report();
  
?>
<script>
var dataSet= <?php echo $basket_report->show_basket_report(); ?>;
</script>
</body>
</html>

【问题讨论】：

标签： php html image datatables

【解决方案1】：

您可以使用columns.render 选项定义回调函数以根据其数据呈现单元格内容。

$('#example').DataTable({
    "ajax": {
        url: "/test/0",
    },
    "columns": [
        { "data": 0 },
        { 
          "data": 1,
          "orderable": false,
          "sortable": false,
          "render": function (data, type, row, meta){
             // If data will be displayed
             if(type === "display"){
                return '<img src="' + data + '">';

             // Otherwise, if search/filtering is performed
             } else {
                return data;  
             }
          }
        }
    ]
});

请注意，如果您使用 columns 定义列，则必须在数组中为表中的每一列都有一个条目（如果您不指定，则可以是 null选项）。或者，您可以使用 columnDefs 定位特定列。

有关代码和演示，请参见下面的示例。请注意，我使用 jQuery Mockjax 插件只是为了演示 Ajax 请求，生产代码不需要它。

$(document).ready(function () {
   // AJAX emulation for demonstration only
   $.mockjax({
      url: '/test/0',
      responseTime: 200,
      responseText: {
         "data": [
            [ "100x150", "http://placehold.it/100x150" ],
            [ "200x150", "http://placehold.it/200x150" ],
            [ "300x150", "http://placehold.it/300x150" ]
         ]
      }
   });

   $('#example').DataTable({
       "ajax": {
           url: "/test/0",
       },
       "columns": [
           { "data": 0 },
           { 
             "data": 1,
             "orderable": false,
             "sortable": false,
             "render": function (data, type, row, meta){
                if(type === "display"){
                   return '<img src="' + data + '">';
                } else {
                   return data;  
                }
             }
           }
       ]
   });
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="ISO-8859-1">

  <link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
  <script src="http://vitalets.github.com/x-editable/assets/mockjax/jquery.mockjax.js"></script>
  
</head>

<body>
  <table id="example" class="display" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>Name</th>
        <th>Picture</th>
      </tr>
    </thead>
  </table>

</body>

</html>

【讨论】：