分页数据表后，自定义类在输入类型复选框中不起作用

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>