jQuery DataTables搜索列是一个复选框

我在我的一个表上使用jQuery DataTables Individual Column Searching ，其中一个列包含复选框。

HTML

 @foreach (var item in Model) {  } 
 
 
 
 @Html.DisplayNameFor(model => model.c_AMake.AMake) 
 
 @Html.DisplayNameFor(model => model.Model) 
 
 @Html.DisplayNameFor(model => model.Test) 
 
 
 
 
 
 @Html.DisplayNameFor(model => model.c_AMake.AMake) 
 
 @Html.DisplayNameFor(model => model.Model) 
 
 @Html.DisplayNameFor(model => model.Test) 
 
 
 
 @Html.DisplayFor(modelItem => item.c_AMake.AMake) 
 
 @Html.DisplayFor(modelItem => item.Model) 
 
 @Html.DisplayFor(modelItem => item.Test) 
  

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

更新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 + ""; } else return data + ""; }, "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(); } }); }); 

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

Answer 1

我创造了（实际上是同类的;））这里的小提琴： http ： //jsfiddle.net/gk67srwb/2/

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

 var table = $('#example').DataTable({ "columnDefs": [ { "render": function ( data, type, row ) { console.log(data); if(data === "True"){ return ""; } else return ""; }, "targets": 2 } ] }); 

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

希望这对你有所帮助！

Answer 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 = ''; html += "Any" html += "True" html += "' selected>False" html += "" $(this).html(html) }else $(this).html(''); } }); 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(); } }); }); 

Answer 3

您可能会在此示例中看到，如果表格单元格与普通文本不同，则需要在数据表中定义表格单元格的类型。

无论如何，您可以始终应用自定义filter。

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

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

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

片段：

 var newTable = $('#NewTable tfoot th').length; // // added new variable // var selectedIdx; // 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(''); } }); var newDTTable = $('#NewTable').DataTable(); newDTTable.columns().every(function () { var that = this; // // changed the events from keyup change to input // $('input', this.footer()).on('input', function (e) { // // save current search input index... // selectedIdx = that.footer().cellIndex; // // call the custom filter.... // newDTTable.draw(false); }); }); $.fn.dataTableExt.afnFiltering.push( // // custom filter ..... // function (oSettings, aData, iDataIndex) { var column = newDTTable.column(selectedIdx); var footer_txt = $('input', column.footer()).val(); var cell_data = aData[selectedIdx]; // // if filtering on the select option column get current value of the select box // if (selectedIdx == 0) { cell_data = $(oSettings.aoData[iDataIndex] .anCells[selectedIdx]).find(':checked').is(":checked"); if (footer_txt.toUpperCase().charAt(0) == 'T') { footer_txt = true; } else { if (footer_txt.toUpperCase().charAt(0) == 'F') { footer_txt = false; } else { footer_txt = undefined; } } // // searching on checkbox....... // return (footer_txt == undefined) ? true : footer_txt == cell_data; } // // search.... // return cell_data.search(footer_txt) >= 0; } ); 

    
 
 
 
test
 
Name
 
Position
 
Office
 
Age
 
Start date
 
Salary
 
 
 
 
 
test
 
Name
 
Position
 
Office
 
Age
 
Start date
 
Salary
 
 
 
 
 
 
Tiger Nixon
 
System Architect
 
Edinburgh
 
61
 
2011/04/25
 
$320,800
 
 
 
 
Garrett Winters
 
Accountant
 
Tokyo
 
63
 
2011/07/25
 
$170,750
 
 
 
 
Ashton Cox
 
Junior Technical Author
 
San Francisco
 
66
 
2009/01/12
 
$86,000
 
 
 
 
Cedric Kelly
 
Senior Javascript Developer
 
Edinburgh
 
22
 
2012/03/29
 
$433,060
 
 
 
 
Airi Satou
 
Accountant
 
Tokyo
 
33
 
2008/11/28
 
$162,700
 
 
 
 
Brielle Williamson
 
Integration Specialist
 
New York
 
61
 
2012/12/02
 
$372,000
 
 
 
 
Herrod Chandler
 
Sales Assistant
 
San Francisco
 
59
 
2012/08/06
 
$137,500
 
 
 
 
Rhona Davidson
 
Integration Specialist
 
Tokyo
 
55
 
2010/10/14
 
$327,900
 
 
 
 
Colleen Hurst
 
Javascript Developer
 
San Francisco
 
39
 
2009/09/15
 
$205,500
 
 
 
 
Sonya Frost
 
Software Engineer
 
Edinburgh
 
23
 
2008/12/13
 
$103,600
 
 
 
 
Jena Gaines
 
Office Manager
 
London
 
30
 
2008/12/19
 
$90,560
 
 
 
 
Quinn Flynn
 
Support Lead
 
Edinburgh
 
22
 
2013/03/03
 
$342,000
 
 
 
 
Charde Marshall
 
Regional Director
 
San Francisco
 
36
 
2008/10/16
 
$470,600
 
 
 
 
Haley Kennedy
 
Senior Marketing Designer
 
London
 
43
 
2012/12/18
 
$313,500
 
 
 
 
Tatyana Fitzpatrick
 
Regional Director
 
London
 
19
 
2010/03/17
 
$385,750
 
 
 
 
Michael Silva
 
Marketing Designer
 
London
 
66
 
2012/11/27
 
$198,500
 
 
 
 
Paul Byrd
 
Chief Financial Officer (CFO)
 
New York
 
64
 
2010/06/09
 
$725,000
 
 
 
 
Gavin Cortez
 
Team Leader
 
San Francisco
 
22
 
2008/10/26
 
$235,500
 
 
 
 
Zorita Serrano
 
Software Engineer
 
San Francisco
 
56
 
2012/06/01
 
$115,000
 
 
 
 
Jennifer Acosta
 
Junior Javascript Developer
 
Edinburgh
 
43
 
2013/02/01
 
$75,650
 
 
 
 
Cara Stevens
 
Sales Assistant
 
New York
 
46
 
2011/12/06
 
$145,600
 
 
 
 
Hermione Butler
 
Regional Director
 
London
 
47
 
2011/03/21
 
$356,250
 
 
 
 
Lael Greer
 
Systems Administrator
 
London
 
21
 
2009/02/27
 
$103,500
 
 
 
 
Jonas Alexander
 
Developer
 
San Francisco
 
30
 
2010/07/14
 
$86,500
 
 
 
 
Shad Decker
 
Regional Director
 
Edinburgh
 
51
 
2008/11/13
 
$183,000
 
 
 
 
Michael Bruce
 
Javascript Developer
 
Singapore
 
29
 
2011/06/27
 
$183,000
 
 
 
 
Donna Snider
 
Customer Support
 
New York
 
27
 
2011/01/25
 
$112,000
 
 
  

Answer 4

尽管之前的post我无法让它发挥作用。 在列搜索框中键入True或False时，数据表（v1.10.15）只是没有在复选框中选取隐藏值。 因此，对于那些您需要替代解决方案的人，以下内容为我解决了这个问题。

更换剃刀代码

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

用这个来表示简单的True和False值

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

接下来将columndef更改为：

 "columnDefs": [ { "targets": 3, "render": function (data, type, row, meta) { if (type === 'display') { if (data === "True") { return ""; } else return ""; } return data; } }]