<html>
<head>
<title>Using Jquery Datatable</title>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://getbootstrap.com/docs/3.3/examples/carousel/carousel.css" rel="stylesheet">
<style>
table#newRow {
display: none
}
#carousel-example-generic {
height:200px;
width:200px;
}
.carousel {
height:200px;
width:200px;
}
.carousel .item{
height:200px;
width:200px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
// initialize table
var data = [["1", "John","image1.jpg"], ["2", "Jim", "image2.jpg"]];
var table = $('#example').DataTable({
data: data,
columnDefs: [
{ targets: 2,
"render": function (data, type, row) {
return getImages(data,row)
}
}
]
})
//console.log(arr); ;
// get data from row based on your product code or id
function getImages(data,row){
console.log(row[0]);
var res =
"[{\"imagename\":\"image1.jpg\",\"ProductIndex\":null},{\"imagename\":\"image2.jpg\",\"ProductIndex\":null},{\"imagename\":\"image3.jpg\",\"ProductIndex\":null}]";
var arr = [];
var dfr = eval(res);
$.each(dfr, function (key, value) {
arr.push({ "src": value['imagename']});
});
var html = '<div id="carousel-example-'+row[0]+'" class="carousel slide" data-ride="carousel">';
html += '<div class="carousel-inner" role="listbox">';
var a = 0;
if(arr.length) {
$.each(arr, function (key, value) {
if(a==0){
html += '<div class="item active"><img src="'+value['src']+'" style="height:200px;width:100px;" alt="..."></div>';
a++;
}else{
html += '<div class="item"><img src="'+value['src']+'" style="height:200px;width:100px;" alt="..."></div>';
a++;
}
})
}
html += '</div>';
html += '<a class="left carousel-control" href="#carousel-example-'+row[0]+'" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-'+row[0]+'" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>';
//return '<img src="'+data+'" width="200">'
//console.log(html);
return html;
}
});
$('#carousel-example-1').carousel({
interval: false,
});
$('#carousel-example-2').carousel({
interval: false,
});
</script>
</head>
<body>
<div>
<table id="example">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>image</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
</html>
ashwin vasava 