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

我有一个来自ajax源的数据表。我想根据其值在一个栏中显示一个复选框。
如果值为active，则复选框应为checked，否则保持为unchecked。
我正在使用Switchery JS样式化复选框。在普通的HTML body中，它可以正常工作，但在datatable列中却不能。


  这是小提琴：


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

最佳答案

问题在于，在dataTable中填充数据之前，您正在执行“交换”。即使您这样做了，您仍将在隐藏行（即第#2，#3页等）上没有Switcherys。

因此，您必须在初始化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
  })
})

分叉的小提琴-> https://jsfiddle.net/jpkysyp1/