Hello, I have data table with all my videos listed.
On data table column i have specified a column with my thumbnail image below.
table.DataTable({ responsive: true, ajax: { url: "{{ route('videos.allvideos') }}", dataSrc: "", type: 'get', data: { // parameters for custom backend script demo columnsDef: [ 'Priority', 'Title', 'Category', 'Thumbnail', 'Status','Action'], }, data: { pagination: { perpage: 50, }, }, },
columns: [
{
data: 'priority'
},
{
data: 'title'
},
{
data: 'category.name'
},
{
data: 'source'
},
{
data: `thumbnail`,responsivePriority: -3
},
{
data: `status`
},
{
data: function(data) {
return `<a href='{{ route('videos.edit') }}/` + data.id + `'> <i class='text-warning la la-eye'></i> </a>
<a href='#' class='delete' data-toggle='modal' data-target='#delete' data-projectid='` + data.id + `' onclick='deleteCat(` + data.id + `)'>
<i class='text-danger la la-trash'></i>
</a>`;
},
searchable: true
},
],
columnDefs: [
{
targets: [-3],
title: 'Thumbnail',
orderable: false,
render: function(data, type, full, meta,) {
return `<img src='{{ asset('storage/data') }}/` + data + `' style='width:70px;height:70px' data-toggle='modal' class='img-thumbnail playvideo' data-target='#videoModal' data-source1='`+ data.src +`'>`;
},
},
{
width: '100px',
targets: -2,
render: function(data, type, full, meta) {
var status = {
1: {'status': 'active', 'class': 'label-light-sucess'},
2: {'status': 'inactive', 'class': ' label-light-danger'},
};
if (typeof status[data] === 'undefined') {
return data;
}
//return '<span class="label label-lg font-weight-bold' + status[data].class + ' label-inline">' + status[data].title + '</span>';
},
},
],
});
This code is working fine but i need, when some one click on thumbnail image bootstrap model should with video source file
@tayyabshahzad1 try to add an event listener on your modal like this:
$('#videoModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var videoSource = button.data('source1');
// attach your videoSource here
})
Please or to participate in this conversation.