0
我在使用jQuery DataTables Individual Column Searching，在我的一個表格上，其中一個列包含複選框。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>
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 =」選中了「。
但作爲一個參數，當我做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 + '"/>');
}
});
更新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();
}
});
});
這裏是我的DataTable的我的定義/創建..有幾個隱藏的列在這個問題的背景下無關緊要。
Downvote沒有評論爲什麼？ –
也許有人不打擾閱讀？似乎有趣的問題。我會試試看。 –
你真的想通過文本框搜索條目嗎？如果做一個用於過濾的複選框，它會更有意義嗎？ –