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

Question

Ну, у меня есть таблица, например:

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="mytable">
    <thead>
        <tr>
            <th>Título</th>
            <th>Data</th>
            <th>Delete</th>
            <th>Estatus</th>
        </tr>
    </thead>
    <tbody>
        <td>
            <tr>Title1</tr>
            <tr>Data1</tr>
            <tr><button class="btn btn-danger eliminar"  id="785">Eliminar</button></tr>
        <tr><input type="checkbox"  name="activoinactivo" id="123"></tr>
        </td>

    </tbody>
</table>

Я хочу добавить индивидуальный стиль к каждой записи, и я делаю это так

 var table = $('#datatable-example').DataTable();
    table.$('input[type="checkbox"]').each(function(){
        $(this).addClass('input-switch');
   });

проблема в том, что он не работает на следующей странице

Что мне нужно, чтобы это работало правильно?

Плагин URL: https://datatables.net/manual/

Answer 1

$('input[type="checkbox"]').each() будет предназначен только для входов, которые видимы (или существуют) в DOM. Посмотрите на createdCell и columnDefs. Вы не предоставляете свою инициализацию DT, но в основном вы должны пойти с:

columnDefs: [{
  targets: 3,
  createdCell: function(cell, cellData, rowData) {
    $(cell).find('input').addClass('input-switch')
  }
}]

Тем самым вы гарантируете, что вы нацелены на все входы, а также эти DT удаляют и внедряют в DOM при переключении страницы. Кроме того, у вас неправильно сформированная разметка

<td>
  <tr>Title1</tr>
  <tr>Data1</tr>
  <tr><button class="btn btn-danger eliminar"  id="785">Eliminar</button></tr>
  <tr><input type="checkbox"  name="activoinactivo" id="123"></tr>
</td>

должно быть

<tr>
  <td>Title1</td>
  <td>Data1</td>
  <td><button class="btn btn-danger eliminar"  id="785">Eliminar</button></td>
  <td><input type="checkbox"  name="activoinactivo" id="123"></td>
</tr>