#javascript #html #jquery
Вопрос:
как я могу использовать фильтры на фильтрах, таких как я выбрал дату и дату, чтобы в колонке отображался фильтр данных, и я снова выбираю пользователя, такого как опытный пользователь, и я снова выбираю профиль взаимодействия, чем отображать фильтры данных на фильтре, На самом деле я пробовал много кода, но он не работал идеально, как я могу сделать таблицу данных в jquery
var minDate, maxDate;
// Custom filtering function which will search data in column four between two values
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var min = minDate.val();
var max = maxDate.val();
var date = new Date(data[4]);
if (
(min === null amp;amp; max === null) ||
(min === null amp;amp; date <= max) ||
(min <= date amp;amp; max === null) ||
(min <= date amp;amp; date <= max)
) {
return true;
}
return false;
}
);
$(document).ready(function() {
// Create date inputs
minDate = new DateTime($('#min'), {
format: 'MMMM Do YYYY'
});
maxDate = new DateTime($('#max'), {
format: 'MMMM Do YYYY'
});
$('#example').DataTable({
"paging": false,
"ordering": false,
"info": false
});
//let table = $('#mytable').DataTable({sDom: 'lrtip'});
// DataTables initialisation
var table = $('#example').DataTable();
// Refilter the table
$('#min, #max').on('change', function() {
table.draw();
});
$('#example tbody th').each(function() {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' title '" />');
});
// DataTable
var table = $('#example').DataTable({
initComplete: function() {
// Apply the search
this.api().columns().every(function() {
var that = this;
$('input', this.header()).on('keyup change clear', function() {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
}
});
});
$(document).ready(function() {
$("#f1").select2();
$("#f2").select2();
$("#f3").select2();
}); <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.dataTables_filter,
.dataTables_info {
display: none;
}
</style>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.9/css/fixedHeader.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/datetime/1.1.0/css/dataTables.dateTime.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js">
</script>
<script src="https://cdn.datatables.net/datetime/1.1.0/js/dataTables.dateTime.min.js">
</script>
</head>
<body>
<div class="container">
<table>
<tr>
<th>Date From<input placeholder="Select date" id="min" name="min" class="form-control"> Date To<input placeholder="Select date" id="max" name="max" class="form-control"> Select User(s)
<select id="f2" class="form-control selectpicker">
<option data-icon="fa-heart">Expert User</option>
<option data-icon="fa-heart">Expert User</option>
<option data-icon="fa-heart">Expert User</option>
</select>
Select Engagement Profile(s)
<select id="f1" class="form-control selectpicker">
<option data-icon="fa-heart">abc</option>
<option data-icon="fa-heart">def</option>
</select>
Select Event(s)
<select id="f3" class="form-control selectpicker">
<option data-icon="fa-heart">DataTable. The </option>
<option data-icon="fa-heart">DataTable. The example</option>
<option data-icon="fa-heart">DataTable. The example</option>
</select>
</th>
</tr>
</table>
<table id="example" border="0" cellspacing="5" cellpadding="5">
<thead>
<tr>
<th>Date</th>
<th>User</th>
<th>Engagement Profile</th>
<th>Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>January 18th 2021</td>
<td>Expert User</td>
<td>abc</td>
<td>edit</td>
<td>DataTable. The example is the same as the DataTables number range filter, but operating on the Start date column rather th</td>
</tr>
<tr>
<td>01/18/2021</td>
<td>Expert User</td>
<td>audit profile</td>
<td>edit</td>
<td>DataTable. The example is the same as the DataTables number range filter, but operating on the Start date column rather th</td>
</tr>
<tr>
<td>01/18/2021</td>
<td>Expert User</td>
<td>def</td>
<td>edit</td>
<td>DataTable. The example is the same as the DataTables number range filter, but operating on the Start date column rather th</td>
</tr>
<tr>
<td>10/18/2021</td>
<td>Expert User</td>
<td>hhh</td>
<td>edit</td>
<td>DataTable. The example is the same as the DataTables number range filter, but operating on the Start date column rather th</td>
</tr>
</tbody>
</table>
</div>
</body>
</html> вы можете показать вывод изображения
Комментарии:
1. Начните с установки только ОДНОЙ библиотеки jQuery и удалите
<script src="https://code.jquery.com/jquery-3.5.1.js"> </script>2. Когда я удаляю таблицу данных js, чем ее не показывать календарь на дату от и до —
3. Я не предлагал вам удалять это.
<script src="https://code.jquery.com/jquery-3.5.1.js"> </script>следует удалить4. я сделал это, но не получилось..