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

Question

嗯，我有一张 table ，例如:

<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');
   });

问题是它在下一页上不起作用

我需要什么才能使其正常工作？

插件网址: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 删除并注入(inject)到 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>