数据表 + iCheck + 分页答案

【问题标题】：DataTables + iCheck + pagination数据表 + iCheck + 分页
【发布时间】：2014-02-07 20:48:18
【问题描述】：

iCheck 仅适用于第一页上的数据表。当我导航到任何其他页面时，它会显示复选框，但它们没有应用 iCheck。此代码有帮助，但不能 100% 工作。

function turn_on_icheck(checkboxClass)
{
    $('input[type=checkbox]').iCheck({
        checkboxClass: checkboxClass
    });
}
$('.data-table').on('page', function() {
    turn_on_icheck();
});

当我转到第二页时，它现在显示一切正常，但如果我返回之前访问过的页面，则复选框不存在。在我看来，它会导致错误，因为那里已经有一个 iCheck 实例在运行。有没有办法检查是否有一个正在运行？

【问题讨论】：

标签： jquery datatables icheck

【解决方案1】：

我在使用 asp.net 网格时遇到了同样的问题。请使用on draw.dt event，这也有助于分页和显示菜单

$('.data-table').on('draw.dt', function () {
    turn_on_icheck();
});

【讨论】：

很高兴它有帮助:) @reformed
假设您正在使用分页，您是否遇到过回调不起作用的问题，例如 on('isChecked') 在另一个页面上？
我不记得我有过这个问题，但有时 - 使用 ASP.NET 更新面板 - 不得不再次回忆起这些事情，就像在那个小提琴 jsfiddle.net/sonr2aje

【解决方案2】：

这是一个更简单的方法：

$('.inputClass').iCheck({
        handle: 'checkbox',
        checkboxClass: 'icheckbox_flat-blue'
    });

source 祝你好运

【讨论】：

【解决方案3】：

当数据表刷新值时，会呈现新的输入，并且输入需要再次应用 icheck 函数。

$(document).ajaxComplete(function() {
    $('input[type=checkbox]').iCheck({
        checkboxClass: checkboxClass
    });
});

【讨论】：

请添加一些关于如何解决问题的解释
当数据表刷新值时，新的输入被渲染，输入需要再次应用 icheck 函数。
您可以编辑问题并添加解释

【解决方案4】：

这样做（在“drawCallback”函数中编写代码）：

...
'drawCallback': function(settings) {
     $('.i-checks').iCheck({
         checkboxClass: 'icheckbox_square-green'
     });
 },
 ...

它解决了我的问题。

【讨论】：

【解决方案5】：

这就是我解决它的方法...在调用 DataTable 函数之前，您应该给 icheck 一些时间，直到它完成...使用 JQUERY 的 when 函数

function Typer(callback)
{    
    if ($("input.flat")[0]) 
    {
        $('input.flat').iCheck({
            checkboxClass: 'icheckbox_flat-green',
            radioClass: 'iradio_flat-green'
        });
    }
}


function enableDataTableMain()
    {
    var table = $('#tableWithData').DataTable({
     "aoColumnDefs": [
        {
            'bSortable': false,
            'aTargets': [0]
        } //disables sorting for column one
    ],
    "tableTools": {
        "sSwfPath": "swf/copy_csv_xls_pdf.swf"
    }});                    
    var tt = new $.fn.dataTable.TableTools( table );
    $( tt.fnContainer() ).insertBefore('div.functionDiv');
}


    $(document).ready(function() {
    $.when( Typer() ).done(function() {
       enableDataTableMain();
    });
});

【讨论】：