I have implemented a jquery datatable along with the range.slider plugin.
My goal is to apply the range slider to filter out data in the last column.
In my attempt, I am using search.push to accomplish this filtering process.
Below is an example of my implementation:
$(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>">Despite capturing the event for data filtering, I'm facing an issue where my datatable does not reflect the filtered results.
Any insights or suggestions on what might be causing this discrepancy?
Your feedback and assistance are much appreciated!