How to show pictures in a table using jQuery DataT

Is that possible that I can show my URL images in data-table? I returning my data in array as it shown here in my code and returning the URL image with...

Before I knew the DataTables I was using the default table an put my table in <img src=""> so how can I use it here?

<?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条回答

Lonely孤独者°

2楼-- · 2019-03-04 16:57

You can use columns.render option to define callback function to render cell content based on its data.

$('#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;  
             }
          }
        }
    ]
});

Note that if you use columns to define your columns, you must have an entry in the array for every single column that you have in your table (these can be null if you don't which to specify any options). Alternatively, you can use columnDefs to target specific columns.

See the example below for code and demonstration. Please note, that I'm using jQuery Mockjax plug-in just for the sake of demonstrating Ajax request, it's not needed for production code.

$(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>

0人赞添加讨论(0) 举报

How to show pictures in a table using jQuery DataT

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间