如何在第二页上查看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以获取代码和演示。

LINKS

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