$.fn.dataTable.ext.search.push 未被调用

Question

我正在尝试使用数据表搜索插件来过滤掉我的HTML表。我遇到了以下问题。

我有一个程序如下， 但是当我检查jquery函数$.fn.dataTable.ext.search.push是否有效时，它没有结果。

<div class="page-wrapper">
<nav aria-label="breadcrumb">
<div class="breadcrumb">

<div class="pull-right-button">
<button type="button" onclick="exportTableToExcel('example')" class="btn btn-success"><i class="fa fa-file-excel-o" aria-hidden="true"></i> Download Report</button>
<button type="button" onclick="showFilters()" class="btn btn-success"> Filters</button>
</div>
</div>
</nav>
<div class="container-fluid" >
<div class="col-sm-12">
<div class="card">
<table border="0"  cellpadding="5">
<tbody><tr>
<td>Minimum age:</td>
<td><input type="text" id="min" name="min"></td>
<td>Maximum age:</td>
<td><input type="text" id="max" name="max"></td>
</tr>
</tbody></table>
<div class="table-responsive" >
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div>
<table id="example" class="display" style="width:100%">
<thead>
//some data
</thead>
<tbody>
//some data
</tbody>
</table>

</div>
<div class="pagination">
<?= $this->pagination->create_links();?>
</div>

</div>
</div>
</div> 
<script type="text/javascript">
function exportTableToExcel(tableID, filename = ''){
\export function
}
</script>
<script >
$('#example').dataTable({
searching: false,
"paging": false, info: false
});

/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
// var Row = document.getElementById("data_row");
// var Cells = Row.getElementsByTagName("td");
//   var age = Cells[0].innerText;
//   console.log(age);
//   var min = document.getElementById("min").value;
//   var max = document.getElementById("max").value;// use data for the age column
var min = parseInt( $('#min').val(), 10 );
var max = parseInt( $('#max').val(), 10 );
var age = parseFloat( data[3] ) || 0;
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && age <= max ) ||
( min <= age   && isNaN( max ) ) ||
( min <= age   && age <= max ) )
{
return true;
}
return false;
}
);
$(document).ready(function() {
var table = $('#example').DataTable();
// Event listener to the two range filtering inputs to redraw on input
$('#min, #max').keyup( function() {
table.draw();
} );
} );

</script>

我参考并借用了以下来源的源代码 https://datatables.net/examples/plug-ins/range_filtering.html 还引用了以下堆栈溢出源，jQuery DataTable 过滤 - 如此混乱

但我无法得到一个令人满意的解决方案。如果有人能告诉我我做错了什么，那就太好了？

感谢您的建议

Answer 1

你的代码有几个问题。

1. 您正在多次初始化数据表，旧方法.dataTable()和新way .DataTable()您应该使用新方式 (1.10+(
2. 此函数中归档的列$.fn.dataTable.ext.search.push遵循基于 0 的索引，因此如果从 1 开始计数，则它是第 4 列，则需要使用 data[3]。相应地更改代码。

这是工作小提琴。

Answer 2

任何有此问题的人都应该在数据表中启用搜索

$('#example').dataTable({
searching: true,
"paging": false, info: false

}(;