我正在尝试使用数据表搜索插件来过滤出我的 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 还引用以下 stackoverflow 来源,jQuery DataTable filtering - so confusing
但我无法获得令人满意的解决方案。如果有人能告诉我我做错了什么,那就太好了?
谢谢你的建议
最佳答案
您的代码有几个问题。
- 您要多次初始化 DataTables,旧方法
.dataTable()
和新方法.DataTable()
您应该使用新方法 (1.10+) - 在此函数
$.fn.dataTable.ext.search.push
中归档的列遵循基于 0 的索引,因此如果从 1 开始计数,那是第 4 列,则需要使用 data[ 3].相应地更改您的代码。
这是工作 fiddle .
关于javascript - $.fn.dataTable.ext.search.push 没有被调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52096937/