Icheck 样式不适用于数据表中的 ajax 数据绑定答案

【问题标题】：Icheck style is not applied in ajax databind in datatableIcheck 样式不适用于数据表中的 ajax 数据绑定
【发布时间】：2015-01-03 05:37:34
【问题描述】：

我在我的网络应用程序中使用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);
    }

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

【问题讨论】：

标签： c# css ajax datatables icheck

【解决方案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();
    }
});

【讨论】：

感谢您的回答。它对我的帮助非常好。我很想知道$.unblockUI();

【解决方案2】：

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

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

【讨论】：

感谢您的宝贵回复。我将脚本 mrender 更改为“mRender”： function (data, type, full) { return ''; //icheckbox_minimal-blue icheck-input checked } 但是并没有对样式做任何改变。复选框的样式没有变化。
因为它是一个javascript文件，你需要刷新页面。我认为
当然。我刷新我的页面，唯一的变化发生在复选框选中状态。但复选框没有出现在 iCheck Box 样式中
好的，因为复选框状态正在发生，也许您现在的问题是 css 或检查图像本身。那你需要检查它为什么没有显示。但是您的代码现在可以了。
看看这个stackoverflow.com/questions/5702075/…，因为你正在使用iCheck库尝试检查复选标记图像的路径是否正确。