jQuery Datatable add date range filter
Datatable is most useful jQuery plugin that helps to make our html tables more powerful and give powers to user to filter , search, sort, pagination etc, But Data table provides a common filter only and yes we can customize and add filter for each column, but still sometimes we need an advance filter like show results only between a date range, So today we will learn how to create a minimum and maximum date range fields and show date picker on it, and user can fill dates by selecting dates and data table will auto filter records based on it.
Keep follow below steps :-
Keep follow below steps :-
I am using Bootstrap if you want to use any other framework then you can use.
Create a new index.php file and paste below code in it, i have used all required CDN like bootstrap, datatable, datepicker etc.
<!DOCTYPE html>
<html>
<head>
<title>Datatable Date Range Filter Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" >
<link rel="stylesheet" href="style.css" >
</head>
<body>
<!-- Here datatable will add -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="script.js"></script>
</body>
</html>
In above code we have included two files style.css and script.js that we have not created yet, we will create it and add our code in it.
so we have create a file that have all required libraries, now in body tag create a search box with two fields , From date and to date and also create a html table or paste below code.
<div class="container pt-5">
<div class="total-filter">
<div class="search-heading">Show Results</div>
<p id="date_filter">
<span id="date-label-from" class="date-label">From: </span><input class="date_range_filter date" type="text" id="datepicker_from" />
<span id="date-label-to" class="date-label">To:</span><input class="date_range_filter date" type="text" id="datepicker_to" />
<button class="btn btn-default clear-date-filter">Clear Filter</button>
</p>
</div>
<table class="table" id="dataTable">
<thead>
<tr>
<th>ID</th>
<th>Date</th>
<th>Name</th>
<th>Users</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<th>2019-01-01</th>
<th>Ajax</th>
<th>100</th>
</tr>
<tr>
<th>2</th>
<th>2020-04-18</th>
<th>CSS</th>
<th>1000</th>
</tr>
<tr>
<th>3</th>
<th>2020-05-17</th>
<th>HTML</th>
<th>100000</th>
</tr>
<tr>
<th>4</th>
<th>2018-06-16</th>
<th>Javascript</th>
<th>102010</th>
</tr>
<tr>
<th>5</th>
<th>2022-01-15</th>
<th>PHP</th>
<th>101010</th>
</tr>
</tbody>
</table>
</div>
CODE EXPLAINATION:
In above code we have created two input fields and passed unique ids to it also we have passed an unique id to table.
Currently it will not work because we have not added our datatable and datepicker code.
Now create a style.css file and paste below css so our search area will look better.
#datatabletwo_filter {
float: right;
}
.total-filter {
text-align: center;
background: #e2e2e2;
padding: 12px;
margin-bottom: 10px;
}
Now create a script.js file and we will add below code in it
var table = $('#dataTable').DataTable();
this code will initialize our data table
then we need to add on change event for our datepicker fields also call datepicker function on it so for that add below code
$('#datepicker_from').datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
$('#datepicker_to').datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
here we are using table.draw() function that is reinitialize datetable data based on search filters
And then to clear our custom search field data , we have created a clear button and for that add below code:
$(".clear-date-filter").on("click", function() {
$('#datepicker_from').val("").datepicker("update");
$('#datepicker_to').val("").datepicker("update");
});
And finally we need to add a search function that will get input field values and show results based on it.
$.fn.dataTable.ext.search.push(SPECIAL NOTE- In above code we are assigning a value to startDate and passing data[1], because our date column exist on 1 position, so keep change it according to your table structure.
function (settings, data, dataIndex) {
var min = $('#datepicker_from').datepicker('getDate');
var max = $('#datepicker_to').datepicker('getDate');
var startDate = new Date($.trim(data[1]));
if (min == null && max == null) return true;
if (min == null && startDate <= max) return true;
if (max == null && startDate >= min) return true;
if (startDate <= max && startDate >= min) return true;
return false;
}
);
var startDate = new Date($.trim(data[1]));After adding above code your jQuery file will be look like this:-
$(document).ready(function() {
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var min = $('#datepicker_from').datepicker('getDate');
var max = $('#datepicker_to').datepicker('getDate');
var startDate = new Date($.trim(data[1])); //here change column value if you have different table structure
if (min == null && max == null) return true;
if (min == null && startDate <= max) return true;
if (max == null && startDate >= min) return true;
if (startDate <= max && startDate >= min) return true;
return false;
}
);
$('#datepicker_from').datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
$('#datepicker_to').datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
var table = $('#dataTable').DataTable();
// Event listener to the two range filtering inputs to redraw on input
$('#datepicker_from,#datepicker_to').change(function () {
table.draw();
});
$(".clear-date-filter").on("click", function() {
$('#datepicker_from').val("").datepicker("update");
$('#datepicker_to').val("").datepicker("update");
});
} );
Okay so now go to browser and check it will look like below screenshot and check functionality.
If you have any question and suggestion then drop a comment below :)
Related Links
Comments
Post a Comment