在数据表列中设置复选框的样式

Question

我有一个来自ajax源的数据表。我想根据其值在一列中显示一个复选框。

如果值为active，则复选框应为checked，否则为unchecked。

我正在使用Switchery JS来设置复选框的样式。它在普通HTML body中工作正常，但不在数据表列中。

  

这是小提琴：

https://jsfiddle.net/sohal/gfuuazxL/4/

Answer 1

问题是你在使用数据填充dataTable 之前正在进行Switchery'。即使您之后执行此操作，您仍然不会在隐藏行上使用Switcherys，即在页面#2，#3等等。

所以你必须在初始化dataTable之后初始化Switchery 并在所有行上进行Switchery。您可以在initComplete()回调中执行此操作，并使用API​​ every()方法迭代所有行：

$(document).ready(function() {
  var table = $('#datatable-buttons').DataTable({
    initComplete : function() {
       this.api().rows().every( function ( rowIdx, tableLoop, rowLoop ) {
         this.nodes().to$().find('.js-switch').each(function(i, e) {
           var switchery = new Switchery(e, {
             color: '#26B99A'
           })
         })
       })  
    },
    ...//rest of the options
  })
})

分叉小提琴 - ＆gt; https://jsfiddle.net/jpkysyp1/