no problem trying responsive feature available datatable. but ı want when I click on the second td I want full detail modal poppup to open there viewable. This feature should not affect the functionality responsive +.
Note: https://datatables.net/extensions/responsive/examples/display-types/modal.html
+ icon is disabled when I use this feature ı don't want it. I want to use the existing + icon feature and I want to open poppup detail when second td is clicked
![]()
var assetListVM;
$(function () {
assetListVM = {
dt: null,
init: function () {
window.$('.js-example-basic-multiple2').select2({
placeholder: "Tür ...",
allowClear: true
});
window.$('.js-example-basic-multiple3').select2({
placeholder: "Durum ...",
allowClear: true
});
window.$('.js-example-basic-multiple4').select2({
placeholder: "Proje ...",
allowClear: true
});
window.dt = window.$('#datatable').DataTable({
"proccessing": true,
"serverSide": true,
"ajax": {
"url": '/Teklif/Get',
"data": function (data) {
if (startDate !== null || endDate !== null) {
data.startDate = window.$('#startDate').val();
data.endDate = window.$('#endDate').val();
}
if (window.DurId !== null) {
data.DurIds = window.$('#DurId').val().toString();
}
if (window.TurId !== null) {
data.TurIds = window.$('#TurId').val().toString();
}
if (window.ProId !== null) {
data.ProIds = window.$('#ProId').val().toString();
}
}
},
"columns": [
{ "title": "Sıra", "data": "Id" },
{ "title": "Tarih", "data": "Tarih", "searchable": true },
{ "title": "Proje", "data": "ProjeID", "searchable": true },
{ "title": "Tür", "data": "TurID", "searchable": true },
{ "title": "Ad", "data": "Ad", "searchable": true },
{ "title": "Belge No", "data": "DokumanNo", "searchable": true, "stitle:": "DokumanNo" },
{ "title": "Firma", "data": "CariID", "searchable": true },
{ "title": "Yetkili", "data": "Yetkili", "searchable": true },
{ "title": "Telefon", "data": "Telefon", "searchable": true },
{ "title": "Açıklama", "data": "Aciklama", "searchable": true },
{ "title": "Oluşturan", "data": "KulID", "searchable": true },
{ "title": "Durum", "data": "DurumID", "searchable": true },
{
"title": "KDV Hariç :",
"data": "Toplam",
"searchable": true
},
{
"title": "KDV Dahil :",
"data": "GenelToplam",
"searchable": true
},
{
"title": "Eylemler",
"render": function (data, type, row) {
const inner = `<a href="/Teklif/Güncelle?id=${
row.Id}" class="on-default edit-row" title="Güncelle" data-id="${row.Id
}"><i class="fa fa-pencil"></i></a> <a href="javascript:void(0);" class="chng-status" title="Teklif Durum" data-id="${row.Id
}"><i class="fa fa-circle-o-notch" style="color:crimson;"></i></a> <a href="javascript:void(0);" class="delete-btn" title="Sil" data-id="${row.Id
}"><i class="fa fa-trash-o"></i></a>`;
return inner;
}
},
{
"title": "Revize",
"render": function (data, type, row) {
const inner = `<a href="/Teklif/GüncelleRevize?id=${
row.Id}" class="on-default edit-row" title="Güncelle" data-id="${row.Id
}"><i class="fa fa-copy"></i></a> <a href="javascript:void(0);" class="view-revision" data-id="${row.Id
}"><i class="ft-list"></i></a>`;
return inner;
}
},
{
"title": "Dosya",
"render": function (data, type, row) {
const inner = `<a href="#" class="on-default showfile-btn" title="Teklif" data-id="${row.Id
}"><i class="fa fa-file" style="color:red;"></i></a> <a href="#" class="on-default showfile-btn2" title="Arge" data-id="${row.Id
}"><i class="fa fa-file" style="color:darkcyan;"></i></a>`;
return inner;
}
}
],
"createdRow": function (row) {
window.$.each(window.$('td', row), function () {
window.$(this).attr('class', "kisa");
});
},
'columnDefs': [
{
'targets': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
'createdCell': function (td, cellData, rowData, row, col) {
window.$(td).attr('title', cellData);
if (col === 4) {
window.$(td).attr('id', `title-${rowData.Id}`);
}
}
}
],
"lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
const oSettings = this.fnSettings();
window.$("td:first", nRow).html(oSettings._iDisplayStart + iDisplayIndex + 1);
return nRow;
},
responsive: true
});
}
};
assetListVM.init();
});
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
