A short description :
01) I dynamically load data from a JSON url into an HTML table. The script is in the external .js file called in the header of the HTML file.
02) I filter the results using a filter at the top of the page for the third column (MAIN VALUE). The script worked fine when I had static data. It stopped working ever since I started pullimg the table data dynamically from a JSON url.
And the JS script is here :
//It loads the data from the JSON file
$.getJSON(
'http://apolosiskos.co.uk/TEB/MOCK_DATA.json',
function(data){
var tr;
//It loads data from the JSON file to the table
$.each (data, function (key, val) {
tr = $('<tr/>');
tr.append('<td class="name" rel="' + val.first_name + '">' + val.first_name + '</td>');
tr.append('<td >' + 'TEST' + '</td>');
tr.append('<td class="metric2" >' + val.id + '</td>');
tr.append('<td class="metric3"><span class="multTotal">' +'0.00'+ '</span></td>');
tr.append('<td class="metric3-100"><span class="metric3-100">' +'0.00'+ '</span></td>');
tr.append('<td class="metric1-100"><span class="metric1-100">' +'0.00'+ '</span></td>');
$('table').append(tr);
});
$("input").keyup(minmax);
//I even tried the below but did not work
$('body').on('input', '#counter-low, #counter-high', minmax);
});
//The filter function for the MIN MAX values in the MAIN VALUE column
function minmax() {
var table = $('table').DataTable();
$.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
return parseFloat(data[2]) >= parseFloat($('#counter-low').val() || data[2])
&& parseFloat(data[2]) <= parseFloat($('#counter-high').val() || data[2])
});
$('#counter-low, #counter-high').on('keyup', table.draw);
}
UPD: I paste the code here that works after an answer below :
$(function(){
//It loads the data from the JSON file
$.getJSON(
'http://apolosiskos.co.uk/TEB/MOCK_DATA.json',
function(data){
var tr;
//It loads data from the JSON file to the table
$.each (data, function (key, val) {
tr = $('<tr/>');
tr.append('<td class="name" rel="' + val.first_name + '">' + val.first_name + '</td>');
tr.append('<td ><input class="metric1"/>' + '</td>');
tr.append('<td class="metric2" >' + val.id + '</td>');
tr.append('<td class="metric3"><span class="multTotal">' +'0.00'+ '</span></td>');
tr.append('<td class="metric3-100"><span class="metric3-100">' +'0.00'+ '</span></td>');
tr.append('<td class="metric1-100"><span class="metric1-100">' +'0.00'+ '</span></td>');
$('table').append(tr);
});
//It loads dimension1 from the JSON file to the filter
$.each (data, function (key, val) {
li = $('<li/>');
li.append('<input rel="name" type="checkbox" value="' + val.first_name + '"><label for="cb1">' + val.first_name + '</label></li>');
$('ul').append(li);
});
$('.counter').keyup(minmax);
$('body').on('input click', 'input:checkbox', filters);
});
});
//Multiplication of the cells function
function multInputs() {
var mult = 0;
$("tr").each(function () {
var $val1 = $('.metric1', this).val();
var $val2 = $('.metric2', this).text();
var $total = ($val1 * 1) * $val2 - $val1;
$('.multTotal', this).text($total.toPrecision(3));
var $val3 = $('.multTotal', this).text();
var $total2 = $val3 / 100
$('.metric3-100',this).text($total2.toPrecision(3));
var $total3 = $val1 / 100
$('.metric1-100',this).text($total3.toPrecision(2));
mult += $total;
});
}
//Filter function for the Dimension1 values
function filters() {
var showAll = true;
$('tr').not('.first').hide();
$('input[type=checkbox]').each(function () {
if ($(this)[0].checked) {
showAll = false;
var dimension1= $(this).attr('rel');
var value = $(this).val();
$('td.' + dimension1+ '[rel="' + value + '"]').parent('tr').show();
}
});
if(showAll){
$('tr').show();
}
}
//The filter function for the MIN MAX values in the MAIN VALUE column
function minmax() {
var table = $('table').DataTable();
$.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
return parseFloat(data[2]) >= parseFloat($('#counter-low').val() || data[2])
&& parseFloat(data[2]) <= parseFloat($('#counter-high').val() || data[2])
});
$('#counter-low, #counter-high').on('keyup', table.draw);
}
