jQuery DataTables搜索列是一个复选框 [英] jQuery DataTables search column that is a checkbox
问题描述
我在其中一张桌子上使用
但如果我开始在文本框中输入True...我的表刷新说没有找到匹配的记录。很公平，因为复选框在HTML渲染方面没有值true而是只是说`checked =checked。
但是作为一个参数，当我执行 console.log（this.data（））时，我会看到表中的每一行，这些值将返回True，错误，错误。
是有没有办法搜索通过jQuery数据表检查或取消选中的复选框？
更新
以下是我创建搜索框的方法：
$（＃NewTable tfoot th）。 （function（index）{
if（index！== newTable - 1）{
var title = $（this）.text（）。trim（）;
$（this）。 html（'< input type =textclass =form-controlplaceholder ='+ title +'/>'）;
}
}）;
更新2
var newDTTable = $（'＃NewTable'）。DataTable（{
dom：'Bfrtip'，
按钮：[
{
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返回数据+< input type ='hidden'value ='False'/>;
}，
目标：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）{
那个
.search（this.value）
.draw（）;
}
}）;
}）;
这是我的数据表的定义/创建..有一些隐藏的列没有在这个问题的背景下。
我创造了（实际上是同类的;））这里的小提琴： http://jsfiddle.net/gk67srwb/2/
基本技巧是在渲染复选框列时向隐藏的输入字段添加：
var table = $（' #example'）。DataTable（{
columnDefs：[
{
render：function（data，type，row）{
console.log（data）;
if（data ===True）{
return< input type ='复选框'已选中已停用/><输入类型='隐藏'值='+数据+ '/>;
}
else返回< input type ='复选框'已禁用/><输入类型= 'hidden'value ='+ data +'/>;
}，
目标：2
}
]
}）;
现在，当您在列搜索框中输入true // false时，将相应地过滤行。当然你可以给隐藏字段一个更方便的值（0/1）或创建一个下拉/复选框。
希望这对你有所帮助！
I am using jQuery DataTables Individual Column Searching, on one of my tables and one of my columns contains checkboxes.
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();
}
});
});
This displays the column I am speaking of like so:
But if I start typing "True" into the textbox.. my table refreshes to say "No matching records found". Fair enough, because the checkbox doesn't have a value of "true" in terms of HTML rendering.. instead it just says `checked="checked".
But as an argument, when I do console.log(this.data()), I see every row in the table and those values are coming back as "True", "False", "False".
Is there a way to search for checkboxes that are either checked or unchecked via jQuery datatables?
UPDATE
Here is how I am creating the search boxes:
$("#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();
}
});
});
Here is my definition/creation of my datatable.. there are a few hidden columns which don't matter in the context of this question.
I created (actually cannibalized ;)) a fiddle here: http://jsfiddle.net/gk67srwb/2/
The basic trick is to append a hidden input field to your checkbox when rendering your checkbox columns:
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
}
]
});
When you now enter true // false into the column search box, the rows are filtered accordingly. Of course you could give the hidden field a more convenient value (0 / 1) or create a dropdown/checkbox.
Hope this helps you!
这篇关于jQuery DataTables搜索列是一个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
