我已经创建了一个数据表,并且在带有输入字段的下拉列表上方.
我想根据下拉菜单中选择的操作进行排序.
列中的搜索正常进行.我想使用下拉菜单的操作进行搜索.在下面找到我可行的示例：
$(document).ready(function() {
var table = $('.datatable-responsive').DataTable();
/**
* Dropdown with Input Field
*/
$.fn.dataTable.ext.search.push(
function(settings,data,dataIndex) {
var changePercentageInput = parseInt($('#changePercentageInput').val(),10);
var changePerc = parseFloat(data[4]) || 0; // use data for the changePerc column
if ((isNaN(changePercentageInput)) ||
(changePercentageInput <= changePerc)) {
return true;
}
return false;
}
);
$('#changePercentageInput').keyup(function() {
table.draw();
});
});<!DOCTYPE html>
<html lang="en">
<head>
<!-- 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">
<!-- /global stylesheets -->
<!-- Core JS files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<!-- /core JS files -->
<!-- Load plugin -->
<script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.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><b>% Change:</b></label>
<div class="mb-1">
<div class="input-group">
<div class="input-group-prepend">
<button type="button" class="btn btn-light dropdown-toggle legitRipple" data-toggle="dropdown" aria-expanded="false">Action</button>
<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px,38px,0px);">
<a href="#" class="dropdown-item">Below</a>
<a href="#" class="dropdown-item">Below or equal</a>
<a href="#" class="dropdown-item">Above</a>
<a href="#" class="dropdown-item">Above or equal</a>
<a href="#" class="dropdown-item">Equal</a>
<a href="#" class="dropdown-item">Not equal</a>
</div>
</div>
<input id="changePercentageInput" type="text" class="form-control" placeholder="CHG %">
</div>
</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>USD/BTC</td>
<td>USD</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">2</td>
<td>EUR/Rubel</td>
<td>EUR</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">3</td>
<td>Yen/USD</td>
<td>Yen</td>
<td>0.00000000</td>
<td>-0.1112%</td>
<td>0.00000000</td>
<td>0.00000000</td>
</tr>
<tr role="row" class="even">
<td tabindex="0" class="sorting_1">4</td>
<td>Yen/EUR</td>
<td>Yen</td>
<td>0.00000000</td>
<td>0.01%</td>
<td>0.00000000</td>
<td>0.00000000</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1" tabindex="0">5</td>
<td>Rubel/Yen</td>
<td>Rubel</td>
<td>0.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">6</td>
<td>EUR/USD</td>
<td>EUR</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>最佳答案
没有从div下拉列表中进行选择,因此添加了我自己的“ select”下拉列表,您可以根据需要进行更改.另外parseFloat和parseInt在“等于”时失败,因此我将其都更改为parseFloat.
原文链接：https://www.f2er.com/jquery/530860.html <div class="input-group-prepend">
<button type="button" class="btn btn-light dropdown-toggle legitRipple" data-toggle="dropdown" aria-expanded="false">Action</button>
<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px,0px);">
<a href="#" class="dropdown-item">Below</a>
<a href="#" class="dropdown-item">Below or equal</a>
<a href="#" class="dropdown-item">Above</a>
<a href="#" class="dropdown-item">Above or equal</a>
<a href="#" class="dropdown-item">Equal</a>
<a href="#" class="dropdown-item">Not equal</a>
</div>
<select id="operator" name="oper">
<option value="<" class="dropdown-item">Below</option>
<option value="<=" class="dropdown-item">Below or equal</option>
<option value=">" class="dropdown-item">Above</option>
<option value=">=" class="dropdown-item">Above or equal</option>
<option value="==" class="dropdown-item">Equal</option>
<option value="!=" class="dropdown-item">Not equal</option>
</select>
</div>
JS下面
$(document).ready(function () {
var table = $('.datatable-responsive').DataTable();
var op = "<";
/**
* Dropdown with Input Field
*/
var operators = {
"==": function (a,b) { return a == b; },"<=": function (a,b) { return a <= b; },">=": function (a,b) { return a >= b; },"<": function (a,b) { return a < b; },">": function (a,b) { return a > b; },"!=": function (a,b) { return a != b; }
};
$.fn.dataTable.ext.search.push(
function (settings,dataIndex) {
var changePercentageInput = parseFloat($('#changePercentageInput').val(),10);
var changePerc = parseFloat(data[4]) || 0; // use data for the changePerc column
if ((isNaN(changePercentageInput)) || (operators[op](+changePercentageInput,+changePerc))) {
console.log(changePercentageInput + " " + changePerc);
return true;
}
return false;
}
);
$('#operator').on('change',function () {
op = this.value;
table.draw();
});
$('#changePercentageInput').keyup(function () {
table.draw();
});
});
