javascript - 第二页中没有样式的复选框

Question

我使用 JSF + Bootstrap + jQuery DataTables 的组合是一个无聊的问题:

我正在使用一个名为 iCheck 的插件来设计我的复选框，请参阅 javascript:

function initIcheckbox(){
    //iCheck for checkbox and radio inputs
    $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
      checkboxClass: 'icheckbox_minimal-blue',
      radioClass: 'iradio_minimal-blue'
    });
    $(".iCheck-helper").remove();

}

这是我调用initCheckBox的地方:

$(document).ready(function() {
    initSummerNote();
    initDataTable(false);
    initIcheckbox();
    jsf.ajax.addOnEvent(handleAjaxEvents);
});

在数据表 jquery 的第一页中，每个复选框都按照我希望的方式进行样式化并生成以下 html 代码:

<div class="icheckbox_minimal-blue" aria-checked="false" aria-disabled="false" style="position: relative;"><input id="j_idt41:example1:7:j_idt54" type="checkbox" name="j_idt41:example1:7:j_idt54" class="minimal" onclick="mojarra.ab(this,event,'valueChange','@this','@this')" style="position: absolute; opacity: 0;"></div>

当我切换到第二页时，复选框未样式化，请查看第二页中生成的 html:

<input id="j_idt41:example1:10:j_idt54" type="checkbox" name="j_idt41:example1:10:j_idt54" class="minimal" onclick="mojarra.ab(this,event,'valueChange','@this','@this')">

正如您所看到的，输入周围的“div”没有创建，我不知道为什么。

如果我更改到第二页并刷新页面，则复选框样式起作用，我注意到只有我看到的页面是风格化的。

Answer 1

原因

jQuery DataTables 从 DOM 中删除不可见元素。这就是为什么当您运行 initIcheckbox() 时，它只影响第一页元素。

解决方案

使用drawCallback选项来定义绘制表格时将调用的函数。

$('#example').dataTable({
   "drawCallback": function(settings){   
      //iCheck for checkbox and radio inputs
      $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
         checkboxClass: 'icheckbox_minimal-blue',
         radioClass: 'iradio_minimal-blue'
      });
   }
});

链接

参见jQuery DataTables: Custom control does not work on second page and after了解更多示例和详细信息。