如何在第二页检查 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。