Icheck style is not applied in ajax databind in datatable

Question

I am using iCheck plug-in with datatable.js in my web application.

I use a ajax request to databind this table.

Please see my code below.

Html

<table id="tblCountry" class="table table-striped table-bordered table-hover table-highlight table-checkable"
                        data-display-rows="10"
                        data-info="true"
                        data-search="true"
                        data-paginate="true"                            >
                        <thead>
                            <tr>
                                <th class="checkbox-column" style="min-width: 50px;">
                                    <input id="thCheckBox" type="checkbox" class="icheck-input" />
                                </th>
                                <th>Id</th>
                                <th style="min-width: 100px;">Country</th>
                            </tr>
                        </thead>
                    </table>

Script

    ajaxUrl = '@Url.Action("GetTestCountryList", "Invoice")';

    dtTable = $("#tblCountry").dataTable({
        sAjaxSource: ajaxUrl,
        aoColumns: [
            {
                "sClass": "checkbox-column",
                bSortable: false,
                "mRender": function (data, type, full) {
                    return '<input type="checkbox" onclick="check(this)" class="icheck-input">';
                }
            },
            { sTitle: "Id", bSortable: false, bVisible: false, },
            { sTitle: "Name", bSortable: true, },
        ],
    });

Source

    public ActionResult GetTestCountryList()
    {

        List<Country> lstCountry = new List<Country>();

        lstCountry.Add(new Country { Id = 1, Name = "India" });
        lstCountry.Add(new Country { Id = 2, Name = "USA" });
        lstCountry.Add(new Country { Id = 3, Name = "France" });
        lstCountry.Add(new Country { Id = 4, Name = "Germiny" });
        lstCountry.Add(new Country { Id = 5, Name = "Britan" });

        return Json(new
        {
            aaData = lstCountry.Select(e => new string[]
            {
                "",
                e.Id.ToString(),
                e.Name
            }).ToArray()
        }, JsonRequestBehavior.AllowGet);
    }

My problem is the check box style is only applied in the header not applied in the rows. Is there any fault in my code?

Answer 1

You need to call icheck from the datatables DrawCallBack - I had the same issue...

$('.ajax-datatable').dataTable({
    responsive: false,
    order: [],
    sPaginationType: "simple_numbers",
    bJQueryUI: true,
    bProcessing: false,
    bServerSide: true,
    bStateSave: true,
    sAjaxSource: $('.ajax-datatable').data('source'),
    "columnDefs": [
        { "orderable": false, "targets":[$('.ajax-datatable').data('targets')]}
    ],

    "fnPreDrawCallback": function() {
        $.blockUI({ message: '<img src="<%= asset_path 'ajax-loader.gif'%>" />',css: { backgroundColor: 'none', border: '0px'} });
        return true;
    },
    "fnDrawCallback": function() {
        $.unblockUI();
        icheck();
    }
});