Can you advise why filter range on column isn't working?
Can you advise why filter range on column isn't working?
WaspFan
Posts: 12Questions: 5Answers: 0
Basically the page is a simple datatable with an "age" column which is filtered using your range filter example. Only difference is that I use Bootstrap 4, so have linked-in the Bootstrap linked js and css files.
However I cannot get the filtering to work, and as far as I can see the JQuery code is correct.
In the past I have had problems with ordering of css/js files in the <head> section, but not sure if this is the reason
Many thanks for any help you can provide
The code for the test page is:
<!DOCTYPE html>
<html>
<head>
<title>Club Administration System</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/all.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src = "js/jquery.min.js" ></script>
<link href="css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" >
<script src = "js/jquery.dataTables.min.js"></script>
<script src="js/datatables.bootstrap4.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#wltable').DataTable({
"bPaginate": false
"info": true,
"order": [[3, "asc"]]
});
var table = $('#wltable').DataTable();
// Event listener to the two range filtering inputs to redraw on input
$('#min, #max').keyup(function () {
table.draw();
});
});
$.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[2]) || 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;
}
);
</script>
</head>
<body>
<!-- Menu -->
<!-- This is where the action starts -->
<div class = "col-md-10 offset-md-1 well">
<br/>
<div class = "alert alert-info">
<h3 align="center">Waiting List</h3>
<table border="0" cellspacing="5" cellpadding="5">
<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>
</table>
<table id = "wltable" class="table table-striped table-bordered dt-responsive nowrap table-sm" width="100%">
<thead class="bg-secondary text-white">
<tr>
<th style='width: 35%;'>Name</th>
<th style='width: 10%;'>Gender</th>
<th style='width: 10%;'>Age</th>
<th style='width: 10%;'>Date Added</th>
<th style='width: 35%;'><center>Action</center></th>
</tr>
</thead>
<tbody class="bg-light text-dark">
<tr>
<td>Lara Dixon</td>
<td>Girl</td>
<td>2</td>
<td data-sort="2019-09-05">05/09/2019</td>
<td><center></center></td>
</tr>
<tr>
<td>JamesGiddings</td>
<td>Boy</td>
<td>7</td>
<td data-sort="2019-09-06">06/09/2019</td>
<td><center></center></td>
</tr>
<tr>
<td>DarcySoliman</td>
<td>Girl</td>
<td>6</td>
<td data-sort="2019-09-08">08/09/2019</td>
<td><center></center></td>
</tr>
<tr>
<td>Ray Brookman</td>
<td>Boy</td>
<td>2</td>
<td data-sort="2019-09-09">09/09/2019</td>
<td><center></center></td>
</tr>
<tr>
<td>Isabel Kailman</td>
<td>Girl</td>
<td>6</td>
<td data-sort="2019-09-13">13/09/2019</td>
<td><center></center></td>
</tr>
<tr>
<td>Thomas Boyle</td>
<td>Boy</td>
<td>8</td>
<td data-sort="2019-09-14">14/09/2019</td>
<td><center></center></td>
</tr>
<tr>
<td>Carol May</td>
<td>Girl</td>
<td>10</td>
<td data-sort="2019-09-14">14/09/2019</td>
<td><center></center></td>
</tr>
<tr>
<td>Edward Turner</td>
<td>Boy</td>
<td>6</td>
<td data-sort="2019-09-15">15/09/2019</td>
<td><center></center></td>
</tr>
<tr>
<td>Mia Tranter</td>
<td>Girl</td>
<td>7</td>
<td data-sort="2019-09-16">16/09/2019</td>
<td><center></center></td>
</tr>
<tr>
<td>Millie Wilson</td>
<td>Girl</td>
<td>5</td>
<td data-sort="2019-09-16">16/09/2019</td>
<td><center></center></td>
</tr>
<tr>
<td>Elena Donoaldson</td>
<td>Girl</td>
<td>3</td>
<td data-sort="2019-09-21">21/09/2019</td>
<td><center></center></td>
</tr>
<tr>
<td>Lee Donovan</td>
<td>Boy</td>
<td>6</td>
<td data-sort="2019-09-21">21/09/2019</td>
<td><center></center></td>
</tr>
<tr>
<td>Luke Wilson</td>
<td>Boy</td>
<td>4</td>
<td data-sort="2019-09-26">26/09/2019</td>
<td><center></center></td>
</tr>
<tr>
<td>Imogen Furness</td>
<td>Girl</td>
<td>4</td>
<td data-sort="2019-09-26">26/09/2019</td>
<td><center></center></td>
</tr>
<tr>
<td>Florence Frances</td>
<td>Girl</td>
<td>3</td>
<td data-sort="2019-09-26">26/09/2019</td>
<td><center></center></td>
</tr>
<tr>
<td>Kristine Walker</td>
<td>Girl</td>
<td>8</td>
<td data-sort="2019-10-01">01/10/2019</td>
<td><center></center></td>
</tr>
</tbody>
</table>
<br>
</div>
</div>
<!-- To Here -->
</body>
</html>
Working example on http://testpages.abbeygymclub.org.uk/TestFilter.php
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
In the browser's console is showing these errors:
Looks like the path you have to the JS files is incorrect which is something you will need to fix. And there is a syntax error in your Javascript that you will need to fix.
Kevin
Thanks for the response. The "missing" javascrript file was because I have been writing it in a Windows system, but the Test system is on a Linux box, which is not tolerant of incorrect case letters in filenames - something I had forgotten about!
It appears the problem was caused by a missing comma in the list of properties in the DataTable setup (see Line 24 in the code in the original post).
Thanks for pointing me in the correct direction to sort it out