jquery - 如何检查第二页上的 iCheck

Question

我有以下代码:

$("#add-new-size-grp").click( function (event) {
    event.preventDefault();
    $.ajax({
        type: "get",
        url:"ajax-get-sizes.php",
        success: function(result){
            $("#sizegrp-table").html(result);
            var sizegrpSizesTable = $('#tbl-sizegrp-sizes').DataTable();
            //iCheck for checkbox and radio inputs
            $('input[type="checkbox"]').iCheck({
              checkboxClass: 'icheckbox_polaris',
              radioClass: 'iradio_polaris'
            });

            $("#modalNewSizeGrp").modal();
        }
    });
});

简而言之，它检索一大块数据并从中形成一个 jQuery DataTable .然后将其返回并插入调用页面的 DIV 中。

开始于 $('input[type="checkbox"]').iCheck({ 的部分使用 iCheck 插件来格式化表格第一列的复选框。

这非常适用于第一页数据。但是，当用户移动到另一个页面或更改页面长度时，新显示的复选框不会应用格式。

我已经研究过使用 page 事件来应用格式，但无法使其正常工作。我试过的代码如下:

$('#tbl-sizegrp-sizes').on( 'page.dt', function () {
    var dtable = $('#tbl-sizegrp-sizes').DataTable();
    var info = dtable.page.info();
    $('input[type="checkbox"]').iCheck({
      checkboxClass: 'icheckbox_polaris',
      radioClass: 'iradio_polaris'
    });

});

我做错了什么？

-- 编辑--

根据要求，这是一个fiddle证明问题。请注意第 1 页上的样式复选框，然后切换到任何其他页面。

Answer 1

原因

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

解决方案

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

var sizegrpSizesTable = $('#tbl-sizegrp-sizes').DataTable({
   'drawCallback': function(settings){
      //iCheck for checkbox and radio inputs
      $('input[type="checkbox"]').iCheck({
         checkboxClass: 'icheckbox_polaris',
         radioClass: 'iradio_polaris'
      });
   }
});

演示

参见 this jsFiddle用于代码和演示。

链接

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