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

Question

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

如果该值为事件，则复选框应选中，否则保持未选中。

我正在使用 Switchery JS 来设计复选框的样式。它在正常的 HTML 正文 中工作正常，但在数据表列中则不行。

Here is the fiddle:

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

Answer 1

问题是您在数据表填充数据之前进行 Switchery。。即使您之后执行了此操作，您最终仍然不会在隐藏行上(即页面 ​​#2、#3 等上)看到 Switchery。

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