c# - Icheck 样式不适用于数据表中的 ajax 数据绑定

Question

我在我的 Web 应用程序中使用iCheck插件。datatable.js

我使用 ajax 请求来对这个表进行数据绑定。

请在下面查看我的代码。

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

我的问题是复选框样式仅应用于标题而不应用于行。我的代码有什么问题吗？

Answer 1

您需要从数据表 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();
    }
});

Answer 2

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

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