Datatable ServerSide "SECOND" TD Click Get Detail Poppup

gokhanoz

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.

colin

This example here demonstrates the second column being used to open the Responsive table. It's using a combination of responsive.details.type and responsive.details.target,

Colin