datatables отзывчивый обратный вызов строки

Question

Я использую датированные V1.10 и угловые данные V7

Моя таблица данных показывает 3 кнопки действий (редактировать, удалять, читать).

Хорошо работает

Но в адаптивном режиме, подобном следующему:

не удается:

это код для кнопок дисплея:

  columnDefs: [
                {
                    orderable: false,
                    // className: 'my_class', // classname définit une checkbox par dessus une case vide [object Object] (data: null)
                    targets: [0],
                    render: function(data, type, full, meta) {
                        return'<input type="checkbox" class="unique-class mat-checkbox mat-accent mat-checkbox-anim-checked-unchecked ' +
                            'mat-checkbox-inner-container mat-checkbox-inner-container-no-side-margin">';
                    }
                },
                {
                    targets: [4],
                    visible: true,
                    data: 'action',
                    render: function(data, type, full, meta) {
                        console.log(type);
                        return '<a id="id" class="btn btn-link btn-success btn-just-icon btn-edit" title="Editer">' +
                            '<i class="material-icons">create</i></a>' +
                            '<a class="btn btn-link btn-danger btn-just-icon btn-remove" title="Supprimer">' +
                            '<i class="material-icons">delete</i></a>' +
                            '<a class="btn btn-link btn-info btn-just-icon btn-read" title="Consulter">' +
                            '<i class="material-icons">visibility</i></a>'
                    }
                }
            ],

А для событий rowCallback:

rowCallback: (row: Node, data: any[] | Object, index: number) => {
                const self = this;
                console.log(row);
                console.log($('td:hidden', row).find('a.btn-edit'));
                console.log($('td', row).find('a.btn-edit'));
                // Unbind first in order to avoid any duplicate handler
                // (see https://github.com/l-lin/angular-datatables/issues/87)
                // $('td:first-child', row).unbind('click');
                // $('td:first-child', row).bind('click', () => {
                const elt = $('td', row).find('[type="checkbox"]');
                if (elt) {
                    elt.unbind('click');
                    elt.bind('click', () => {
                        if (elt[0].checked) {
                            that.selectedList.push(data as Contact)
                        } else {
                            const itemIndex = this.selectedList.indexOf(data as Contact);
                            that.selectedList.splice(itemIndex, 1);
                        }
                        console.log(that.selectedList.length + ' éléments sélectionés');
                        this.selectedList.forEach((item) => {
                            console.log(item)
                        })
                    });
                }
                const eltedit = $('td', row).find('a.btn-edit');
                if (eltedit) {
                    console.log('trouvé td');
                    eltedit.unbind('click');
                    eltedit.bind('click', () => {
                        console.log(data);
                        this.crudContact(data, 2);
                    });
                }
                const eltedit2 = $('td:hidden', row).find('a.btn-edit');
                console.log($('#id').css('display'));
                if (eltedit2) {
                    console.log('trouvé td hidden');
                    eltedit2.unbind('click');
                    eltedit2.bind('click', () => {
                        console.log(data);
                        this.crudContact(data, 2);
                    });
                }

• eltedit contant works
• константа eltedit2 для режима ответа не работает.

Когда я проверяю элементы, я замечаю, что в адаптивном режиме дисплей: атрибут не отображается:

Я думаю, что именно этот атрибут избегает обнаружения события щелчка ...

Как это решить?

EDIT Я добавил журнал, как это

const eltedit2 = $('td:hidden', row).find('a.btn-edit');
console.log($('td:hidden', row).find('a.btn-edit').length);

и значение длины равно 1, поэтому элемент найден. Так что я полагаю, что проблема связана с функцией «unbind»

РЕДАКТИРОВАТЬ 2 Если я изменю

if (eltedit2) {
                    console.log('trouvé td hidden');
                    eltedit2.unbind('click');
                    eltedit2.bind('click', () => {
                        console.log(data);
                        this.crudContact(data, 2);
                    });
                }

от:

if (eltedit2) {
                console.log('trouvé td hidden');
                $('table').unbind('click');
                $('table').bind('click', () => {
                    console.log(data);
                    this.crudContact(data, 2);
                });
            }

Это работает, за исключением того, что это всегда последняя выбранная запись ...

Answer 1

Я нашел эту полезную ссылку http://jsfiddle.net/Guruprasad_Rao/891mdyvy/1/

и теперь я получаю решение для управления моей базой данных в адаптивном режиме и в веб-режиме

Первая точка в столбце columnDefs, добавьте атрибут данных следующим образом:

{
   targets: [4],
   visible: true,
   data: 'action',
   render: function(data, type, full: Contact, meta) {
   const contact = JSON.stringify(data).split('"').join('\'');
   return '<a data-contact="'+ contact + '" class="btn btn-link btn-success btn-just-icon btn-edit" title="Editer">' +
          '<i class="material-icons">create</i></a>' +
          '<a data-contact="' + contact + '"  class="btn btn-link btn-danger btn-just-icon btn-remove" title="Supprimer">' +
          '<i class="material-icons">delete</i></a>' +
          '<a data-contact="' + contact + '" class="btn btn-link btn-info btn-just-icon btn-read" title="Consulter">' +
          '<i class="material-icons">visibility</i></a>'
    }
}

2-я точка, в точке rowCallback, обнаруживает событие щелчка и извлекает содержимое данных следующим образом:

$('table').unbind('click');
$("table").on('click','a.btn-edit', function () {
     console.log(JSON.parse($(this).data('contact').split('\'').join('"')));
     // ..your process..
});
$("table").on('click','a.btn-remove', function () {
     console.log(JSON.parse($(this).data('contact').split('\'').join('"')));
     // ..your process..
});
$("table").on('click','a.btn-read', function () {
     console.log(JSON.parse($(this).data('contact').split('\'').join('"')));
     // ..your process..
});

Работает как в адаптивном режиме, так и в режиме "веб"