Javascript jQuery DataTables搜索列是一个复选框

我在我的一个表上使用，并且我的一个列包含复选框

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>

更新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();
            }
        });
});

var newDTTable=$（'#NewTable'）.DataTable({
dom:'Bfrtip'，
按钮：[
{
扩展：“excel”，
出口选择：{
列：':not（：最后一个子项）'
}
}],
aoColumnDefs：[
{
“渲染”：函数（数据、类型、行）{
if（data.indexOf（“checked”）>-1）{
返回数据+“”；
}
否则返回数据+“”；
},
“目标”：5
},
{“bSortable”：false，“ataargets”：[2,18]}，
{“可搜索”：false，“目标”：[4,7,8,9,10,11,12,13,14,15,16,17,18]}
]
});
newDTTable.columns（）.every（函数（colIdx）{
var=这个；
console.log（this.data（））；
$（'input'，this.footer（））。在（'keyup change'）上，
函数（）{
if（that.search（）！==此.value）{
那个
.search（此.value）
.draw（）；
}
});
});

以下是我对数据表的定义/创建。。在这个问题的上下文中，有几个隐藏的列无关紧要。

我在这里创建了一个提琴（实际上是自相残杀的；）：

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

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

var table=$（'#示例'）.DataTable({
“columnDefs”：[
{
“渲染”：函数（数据、类型、行）{
控制台日志（数据）；
如果（数据==“真”）{
返回“”；
}
否则返回“”；
},
“目标”：2
}
]
});

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

希望这对你有帮助

您可能会看到，在Datatables中，如果表格单元格的类型不同于普通文本，则需要定义表格单元格的类型

无论如何，您可以始终应用自定义筛选器

假设第一列中有select元素。你需要：

• 用于保存当前搜索框索引的全局变量或类似内容
• 将此值保存在输入上，而不是键控更改事件上。这是为了只调用一次自定义搜索
• 在自定义搜索函数中，您需要测试是否对第一列执行操作，从而应用自定义搜索

我使用的是示例表，而不是您的表。这应该不是问题。这只是描述如何解决您的问题的一种方式

片段：

var newTable=$（'#newTable tfoot th'）。长度；
//
//添加了新变量
//
var-selectedx；
//设置-向每个页脚单元格添加文本输入
$（“#NewTable tfoot th”）。每个（函数（索引）{
如果（索引！==newTable-1）{
var title=$（this.text（）.trim（）；
$（this.html（“”）；
}
});
var newDTTable=$（'#NewTable'）.DataTable（）；
newDTTable.columns（）.every（函数（）{
var=这个；
//
//将事件从keyup change更改为input
//
$（'input'，this.footer（））。on（'input'，function（e）{
//
//保存当前搜索输入索引。。。
//
选择edidx=that.footer（）.cellIndex；
//
//调用自定义筛选器。。。。
//
newDTTable.draw（false）；
});
});
$.fn.dataTableExt.afnFiltering.push(
//
//自定义筛选器。。。。。
//
功能（oSettings、aData、iDataIndex）{
var column=newDTTable.column（选择edidx）；
var footer_txt=$（'input'，column.footer（））.val（）；
var cell_data=aData[selecteddx]；
//
//如果在“选择选项”列上进行过滤，则获取选择框的当前值
//
如果（选择edidx==0）{
单元数据=$（oSettings.aoData[iDataIndex]
.anCells[selectedx]）.find（“：checked”）.is（“：checked”）；
if（footer_txt.toUpperCase（）.charAt（0）='T'）{
页脚_txt=true；
}否则{
如果（footer_txt.toUpperCase（）.charAt（0）='F'）{
页脚_txt=false；
}否则{
页脚_txt=未定义；
}
}
//
//正在搜索复选框。。。。。。。
//
返回（footer\u txt==未定义）？true：footer\u txt==单元格数据；
}
//
//搜索。。。。
//
返回单元格\u data.search（页脚\u txt）>=0；
}
);

测试
名称
位置
办公室
年龄
开始日期
薪水
测试
名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$320,800
加勒特温特斯
会计
东京
63
2011/07/25
$170,750
阿什顿考克斯
初级技术作者
旧金山
66
2009/01/12
$86,000
塞德里克·凯利
高级Javascript开发人员
爱丁堡
22
2012/03/29
$433,060
佐藤航空
会计
东京
33
2008/11/28
$162,700
布里尔·威廉姆森
集成专家
纽约
61
2012/12/02
$372,000
赫罗德·钱德勒
售货员
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();
            }
        });
});

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

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();
        if(title=='Test'){
            var html = '<select class="form-control">';
            html += "<option value='' selected>Any</option>"
            html += "<option value='checked' selected>True</option>"
            html += "<option value='box"+'"'+">' selected>False</option>"
            html += "</select>"
            $(this).html(html)
        }else
            $(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, select', this.footer()).on('keyup change',
        function () {
            if (that.search() !== this.value) {
                that
                    .search(this.value)
                    .draw();
            }
        });
});

@Html.DisplayFor(modelItem => item.Test)

@Html.ValueFor(modelItem => item.Test)

"columnDefs": [
{
    "targets": 3,
    "render": function (data, type, row, meta) {

        if (type === 'display') {
            if (data === "True") {
                return "<input disabled='disabled' class='check-box' type='checkbox' checked='checked'>";
            }
            else return "<input disabled='disabled' class='check-box' type='checkbox'>";
        }

        return data;
    }
}]

<td><div style="display:none">{{pi.coverageIssue}}</div><input type="checkbox" class="claimsList-checkbox" disabled [checked]=pi.coverageIssue></td>

applyFilter(column,value) {
    var dTable = $('#claimSearchTable').DataTable();
    dTable.column(column).search(value).draw();     
}