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

【问题标题】：Style a checkbox in datatable columns在数据表列中设置复选框的样式
【发布时间】：2016-06-14 11:13:44
【问题描述】：

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

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

我正在使用Switchery JS 对复选框进行样式化。它在正常的HTML body 中工作正常，但在数据表列中不能正常工作。

这是小提琴：

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

【问题讨论】：

标签： javascript jquery checkbox datatables switchery

【解决方案1】：

问题是您正在执行 Switchery'在 dataTable 填充数据之前。即使你在之后这样做了，你仍然会在隐藏行上没有 Switcherys，即在页面 #2、#3 等等。

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

fork fiddle -> https://jsfiddle.net/jpkysyp1/

【讨论】：