如何检查第二页上的 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 插件来格式化作为 table.

第一列的复选框

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

我考虑过使用 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 选项定义绘制 table 时调用的函数。

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。

如何检查第二页上的 iCheck

How to check an iCheck on the second page

jquery

css

datatables

icheck

原因

解决方案

演示

链接