jQuery DataTables 搜索列是一个复选框

我在用jQuery DataTables 单独列搜索 https://datatables.net/examples/api/multi_filter_select.html，在我的一张表和我的一列上包含复选框。

HTML

<table id="NewTable" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th class="col-sm-1 text-center ">
                @Html.DisplayNameFor(model => model.c_AMake.AMake)
            </th>
            <th class="text-center col-sm-1">
                @Html.DisplayNameFor(model => model.Model)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Test)
            </th>
        </tr>
    </thead>
    <tfoot id="NewTable-Foot" style="display: table-header-group">
        <tr>
            <th class="col-sm-1 text-center ">
                @Html.DisplayNameFor(model => model.c_AMake.AMake)
            </th>
            <th class="text-center col-sm-1">
                @Html.DisplayNameFor(model => model.Model)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Test)
            </th>
        </tr>
    </tfoot>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.c_AMake.AMake)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Model)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Test)
            </td>
        </tr>
    }
</table>

jQuery

var newTable = $('#NewTable tfoot th').length;

// Setup - add a text input to each footer cell
$("#NewTable tfoot th").each(function (index) {
    if (index !== newTable - 1) {
        var title = $(this).text().trim();
        $(this).html('<input type="text" class="form-control" placeholder="' + title + '"/>');
    }
});

var newDTTable = $('#NewTable').DataTable();

newDTTable.columns().every(function () {
    var that = this;
    console.log(this.data());
    $('input', this.footer()).on('keyup change',
        function () {
            if (that.search() !== this.value) {
                that
                    .search(this.value)
                    .draw();
            }
        });
});

这会显示我所说的列，如下所示：

但是，如果我开始在文本框中输入“True”..我的表格会刷新并显示“未找到匹配的记录”。很公平，因为就 HTML 渲染而言，复选框没有“true”值。相反，它只是显示“checked=”checked”。

但作为一个论点，当我这样做时console.log(this.data())，我看到表中的每一行，这些值返回为“True”、“False”、“False”。

有没有办法通过 jQuery 数据表搜索选中或未选中的复选框？

UPDATE

以下是我创建搜索框的方法：

$("#NewTable tfoot th").each(function (index) {
    if (index !== newTable - 1) {
        var title = $(this).text().trim();
        $(this).html('<input type="text" class="form-control" placeholder="' + title + '"/>');
    }
});

UPDATE 2

var newDTTable = $('#NewTable').DataTable({
    dom: 'Bfrtip',
    buttons: [
    {
        extend: 'excel',
        exportOptions: {
            columns: ':not(:last-child)'
        }
    }],
    aoColumnDefs: [
        {
            "render": function (data, type, row) {
                if (data.indexOf("checked") > -1) {
                    return data + "<input type='hidden' value='True' />";
                }
                else return data + "<input type='hidden' value='False' />";
            },
            "targets": 5
        },
        { "bSortable": false, "aTargets": [2, 18] },
        { "bSearchable": false, "aTargets": [4,7,8,9,10,11,12,13,14,15,16,17,18] }
    ]
});

newDTTable.columns().every(function (colIdx) {
    var that = this;
    console.log(this.data());
    $('input', this.footer()).on('keyup change',
        function() {
            if (that.search() !== this.value) {
                that
                    .search(this.value)
                    .draw();
            }
        });
});

这是我对数据表的定义/创建。有一些隐藏列在这个问题的上下文中并不重要。

我在这里创建了（实际上是蚕食了；））一个小提琴：http://jsfiddle.net/gk67srwb/2/ http://jsfiddle.net/gk67srwb/2/

基本技巧是在渲染复选框列时将隐藏的输入字段附加到复选框：

var table = $('#example').DataTable({
    "columnDefs": [
        {
            "render": function ( data, type, row ) {
            console.log(data);
            if(data === "True"){
                return "<input type='checkbox' checked disabled /><input type='hidden' value='" + data + "' />";
                }
                else return "<input type='checkbox' disabled /><input type='hidden' value='" + data + "' />";
            },
            "targets": 2
        }
        ]
});

现在，当您在列搜索框中输入 true // false 时，系统会相应地过滤行。当然，您可以为隐藏字段指定一个更方便的值（0 / 1）或创建一个下拉列表/复选框。

希望这对您有帮助！