Icheck 样式未应用于数据表中的 ajax 数据绑定

Question

我在我的 Web 应用程序中使用 iCheck plug-in 和 datatable.js。

我使用 ajax 请求对此 table 进行数据绑定。

请看下面我的代码。

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>

脚本

    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, },
        ],
    });

来源

    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);
    }

我的问题是复选框样式仅应用于 header 未应用于行。我的代码有什么错误吗？

Answer 1

像这样添加一个选中的属性

  return '<input type="checkbox" onclick="check(this)" class="icheck-input" checked>';

Answer 2

您需要从数据表 DrawCallBack 调用 icheck - 我有同样的问题...

$('.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();
    }
});

Icheck 样式未应用于数据表中的 ajax 数据绑定

Icheck style is not applied in ajax databind in datatable

css

c#

ajax

datatables

icheck