我正在使用jquery数据表和range.slider。
我想使用我的范围滑块过滤最后一列。
如您所见，我正在尝试使用search.push来过滤数据。
在我的可行示例下面查找：
$(document).ready(function() {
var lowestPriceRange = $("#ion-range");
/**
* Lowest Price Range
*/
lowestPriceRange.ionRangeSlider({
type: 'double',
min: 0,
max: 100,
from: 0,
to: 50
});
const table = $('.datatable-responsive').DataTable();
$('#ion-range').on('change', function() {
var $inp = $(this);
var min = parseFloat($inp.data("from")); // input data-from attribute
var max = parseFloat($inp.data("to")); // input data-to attribute
let search = [];
console.log(min, max); // all values
search.push(
function(settings, data, dataIndex) {
var col = parseFloat(data[4]) || 0; // data[number] = column number
if ((isNaN(min) && isNaN(max)) ||
(isNaN(min) && col <= max) ||
(min <= col && isNaN(max)) ||
(min <= col && col <= max)) {
return true;
}
return false;
}
);
table.column(3).search(search, true, false).draw();
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Global stylesheets -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap_limitless.min.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/components.min.css" rel="stylesheet" type="text/css">
<link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/colors.min.css" rel="stylesheet" type="text/css">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/main/jquery.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/main/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/tables/datatables/datatables.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/extensions/jquery_ui/widgets.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/extensions/jquery_ui/touch.min.js"></script>
<!-- /load plugin -->
<!-- Theme JS files -->
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
<script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>
<body class="navbar-top">
<!-- Page content -->
<div class="page-content pt-0">
<!-- Default ordering -->
<div class="card">
<div class="card-body">
<fieldset>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label>Lowest Price Range:</label>
<div class="mb-1">
<input type="text" class="form-control ion-height-helper" id="ion-range" data-fouc>
</div>
</div>
</div>
</div>
</fieldset>
</div>
</div>
<div class="card">
<div class="card-body">
<table class="table datatable-responsive dataTable" style="width:100%">
<thead>
<tr>
<th>#</th>
<th>Stock</th>
<th>SYMBOL</th>
<th>LAST</th>
<th>CHG %</th>
<th>CHG</th>
<th>HIGH</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td tabindex="0" class="sorting_1">1</td>
<td>OAX/ETH</td>
<td>OAX</td>
<td>0.00061720</td>
<td>-181.40%</td>
<td>-0.00001140</td>
<td>0.00065050</td>
</tr>
<tr role="row" class="even">
<td tabindex="0" class="sorting_1">8</td>
<td>SYS/BNB</td>
<td>SYS</td>
<td>0.00767000</td>
<td>-166.70%</td>
<td>-0.00013000</td>
<td>0.00803000</td>
</tr>
<tr role="row" class="odd">
<td tabindex="0" class="sorting_1">9</td>
<td>BCN/ETH</td>
<td>BCN</td>
<td>0.000000111</td>
<td>0.00%</td>
<td>0.00000000</td>
<td>0.00000000</td>
</tr>
<tr role="row" class="even">
<td tabindex="0" class="sorting_1">10</td>
<td>BCN/BNB</td>
<td>BCN</td>
<td>10.00000000</td>
<td>0.00%</td>
<td>0.00000000</td>
<td>0.00000000</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1" tabindex="0">11</td>
<td>ENJ/BNB</td>
<td>ENJ</td>
<td>55.00658300</td>
<td>28.90%</td>
<td>0.00001900</td>
<td>0.00707600</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1" tabindex="0">12</td>
<td>2GIVE/BTC</td>
<td>2GIVE</td>
<td>0.00000040</td>
<td>256.41%</td>
<td>0.00000001</td>
<td>0.00000042</td>
</tr>
</tbody>
</table>
<!-- /default ordering -->
</div>
</div>
</div>
</body>
</html>
如您所见，过滤数据时我捕获了事件，但是我的数据表没有被过滤。
有人建议我在做什么错吗？
感谢您的答复！
答案 0 :(得分：1)
我无法像您一样在搜索方法中找到有关使用过滤器功能（回调）的任何信息，但是能够找到这种方法来扩展搜索。
/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = parseInt( $('#min').val(), 10 );
var max = parseInt( $('#max').val(), 10 );
var age = parseFloat( data[3] ) || 0; // use data for the age column
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && age <= max ) ||
( min <= age && isNaN( max ) ) ||
( min <= age && age <= max ) )
{
return true;
}
return false;
}
);
来源：https://datatables.net/examples/plug-ins/range_filtering.html
请注意，您还选择了错误的列（“ LAST”标签是第3个索引，因为列以0索引开头）。希望这会有所帮助。
答案 1 :(得分：1)
仅显示放置乔治答案的位置以使上述问题正确运行。
$(document).ready(function() {
var lowestPriceRange = $("#ion-range");
var min=0;
var max=0;
/**
* Lowest Price Range
*/
lowestPriceRange.ionRangeSlider({
type: 'double',
min: 0,
max: 100,
from: 0,
to: 50
});
const table = $('.datatable-responsive').DataTable();
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var age = parseFloat( data[5] ) || 0; // use data for the age column
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && age <= max ) ||
( min <= age && isNaN( max ) ) ||
( min <= age && age <= max ) )
{
return true;
}
return false;
}
);
$('#ion-range').on('change', function() {
var $inp = $(this);
min = parseFloat($inp.data("from")); // input data-from attribute
max = parseFloat($inp.data("to")); // input data-to attribute
let search = [];
console.log(min, max); // all values
search.push(
function(settings, data, dataIndex) {
var col = parseFloat(data[4]) || 0; // data[number] = column number
if ((isNaN(min) && isNaN(max)) ||
(isNaN(min) && col <= max) ||
(min <= col && isNaN(max)) ||
(min <= col && col <= max)) {
return true;
}
return false;
}
);
table.column(3).search(search, true, false).draw();
});
});