Как добавить обратный вызов для кнопки в каждой строке таблицы DataTables - PullRequest
Новая
       21

Как добавить обратный вызов для кнопки в каждой строке таблицы DataTables

0 голосов
/ 06 октября 2018

У меня есть таблица, где в каждой строке есть кнопка.Я форматирую таблицу, используя JS DataTables .Я хотел бы добавить функцию обратного вызова по нажатию кнопки в каждой строке.

В настоящий момент у меня есть следующее: 

$(document).ready(function(){
     $(".btn-email").click(send_email);
     $(".btn-fix").click(toggle_status);
});

Однако, это только добавляет функцию обратного вызова по нажатию кнопкииз отображаемых строк, т. е. при переходе на новую страницу таблицы (поскольку DataTables обрабатывает разбиение на страницы), кнопки не работают.

Я безуспешно пробовал следующее: 

$("#jfTable").on( 'draw', function () {
    $(".btn-email").click(send_email);
    $(".btn-fix").click(toggle_status);
} );

Как правильно это сделать?

Ответы [ 2 ]

0 голосов
/ 08 октября 2018

Я остановился на чем-то более простом: 

$(document).ready(function(){
  $('#jfTable').on('page.dt search.dt length.dt', function () {
    $(".btn-email").off("click").on("click", send_email);
    $(".btn-fix").off("click").on("click", toggle_status);
  });
});

page.dt, search.dt или length.dtзапускаются, когда обновляемое представление обновляется соответствующим образом..off("click") позволяет избежать добавления кнопки с несколькими одинаковыми событиями нажатия (например, из предыдущей нумерации страниц).

0 голосов
/ 06 октября 2018

Я надеюсь, что что-то подобное поможет вам, потому что это сработало для моего случая.

  • Вы можете добавить свойство столбцов, и в каждом столбце вы можете отобразить свой объект данных по имени.
  • У вас есть доступ ко всем данным из объекта с именем "dataObject"
  • Так что здесь я создаю ссылку с идентификатором из другого столбца (dataObject.id).Вы можете создать функцию для кнопки и использовать ее с событием OnClick в свойствах кнопки.

См. Мой код: 

{
columns: [{
          data: "name",
          render: function(data, type, dataObject, meta) {
            return `<a class="col" id="${dataObject.id}">${data}</a>`;
          }
         }]     
}
    
$(document.body).on("click", ".col", function(item) {
  console.log(item)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
...