jQuery dataTables筛选器与子行组合时不工作
我正在使用dataTables插件,并重新使用我在另一个页面上的代码来选择过滤一个特定列。当这个未能正确过滤时,我感到困惑,因为它与我以前使用的代码相同 经过检查,我现在才发现原因是使用数据表的子行- HTML 在重置故障过滤器后选择后,过滤器不会重置 奇怪的是,如果我使用上一列$col4_filter.change函数{fnFilterColumn2;};那么它会因为某种原因而起作用jQuery dataTables筛选器与子行组合时不工作,jquery,html,datatables,jquery-datatables,Jquery,Html,Datatables,Jquery Datatables,我正在使用dataTables插件,并重新使用我在另一个页面上的代码来选择过滤一个特定列。当这个未能正确过滤时,我感到困惑,因为它与我以前使用的代码相同 经过检查,我现在才发现原因是使用数据表的子行- HTML 在重置故障过滤器后选择后,过滤器不会重置 奇怪的是,如果我使用上一列$col4_filter.change函数{fnFilterColumn2;};那么它会因为某种原因而起作用 我猜列插入会弄乱过滤器,因为列的索引已关闭。抱歉,刚刚意识到我的错误是什么 function fnFilter
我猜列插入会弄乱过滤器,因为列的索引已关闭。抱歉,刚刚意识到我的错误是什么
function fnFilterColumn(i) {
oTable.fnFilter($('#col4_filter').val(), i); // hard-coding selector
}
$("#col4_filter").change( function() { fnFilterColumn(4); }); // add 1 to the column index to account for dynamically added column
我在查找错误的过程中被搞得一团糟,我忘了,当我更改列索引时,fnFilterColumn将查找一个不存在的元素值以进行筛选。您可以尝试我的yadcf插件,但它没有在表中与子行一起测试。谢谢,如果我没有任何进展,我会尝试一下。
if (!jQuery().dataTable) {
return;
}
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '<span class="row-details row-details-close"></span>';
$('table thead tr').each(function() {
this.insertBefore(nCloneTh, this.childNodes[0]);
});
$('table tbody tr').each(function() {
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
});
var oTable = $('table').dataTable({
"sDom": 'T<"clear">lfrtip',
"aaSorting": [],
"aLengthMenu": [
[15, 20, -1],
[15, 20, "All"] // change per page values here
],
// set the initial value
"iDisplayLength": 15,
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
}
});
/* Formatting function for row details */
function fnFormatDetails (oTable, nTr, row_id) {
var id = row_id.split('_').pop();
var sOut = '<table>';
sOut += '<tr><td id="details_' + id + '">Finding Child Rows... <img src="/images/portal/loading.gif" alt="Finding Child Rows..." /></td></tr>';
sOut += '</table>';
$.ajax({
type: 'GET',
url: '/ajax_find_child_rows',
dataType: "html",
data: { id: id },
success: function(data) {
$('#details_' + id).html(data);
},
error: function() {
$('#details_' + id).html('No child rows found');
}
});
return sOut;
}
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('table').on('click', 'tbody td .row-details', function() {
var nTr = $(this).parents('tr')[0];
if (oTable.fnIsOpen(nTr)) {
/* This row is already open - close it */
$(this).addClass("row-details-close").removeClass("row-details-open");
oTable.fnClose(nTr);
} else {
/* Open this row */
var row_id = ($(this).parent().parent().attr('id'));
$(this).addClass("row-details-open").removeClass("row-details-close");
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr, row_id), 'details');
}
});
function fnFilterColumn(i) {
oTable.fnFilter($('#col'+(i+1)+'_filter').val(), i);
}
$("#col4_filter").change( function() { fnFilterColumn(3); });
$("#col4_filter").change( function() { fnFilterColumn(4); }); // 4 instead of 3 (selector doesn't matter just now)
function fnFilterColumn(i) {
oTable.fnFilter($('#col4_filter').val(), i); // hard-coding selector
}
$("#col4_filter").change( function() { fnFilterColumn(4); }); // add 1 to the column index to account for dynamically added column