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);
});

在datatable 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'
      });
   }
});

LINKS

有关更多示例和详细信息，请参阅jQuery DataTables: Custom control does not work on second page and after。

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

1 个答案:

原因

解

LINKS