如何使用jQuery DataTables在表中显示图片 [英] How to show pictures in a table using jQuery DataTables
问题描述
可以在数据表中显示我的URL图像吗？我在我的代码中返回我的数据，如我在代码中显示的那样，并返回URL图像...
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...
在我知道DataTables之前，我使用的是默认表我的表格在< img src => 中，所以如何在这里使用？
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>
推荐答案
您可以使用 columns.render 选项来定义回调函数以根据其数据呈现单元格内容。
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;
}
}
}
]
});
请注意，如果您使用列定义您的列，您必须在表中的每个列的数组中都有一个条目（如果您不指定任何选项，则可以为 null ） 。或者，您可以使用 columnDefs 定位特定列。
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.
有关代码和演示，请参见下面的示例。请注意，我正在为了演示Ajax请求而使用 jQuery Mockjax 插件，不需要生产代码。
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>
这篇关于如何使用jQuery DataTables在表中显示图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
