Min-Max filter does not work when other functions are loaded

01) I have A JSON URL and I load the data into an HTML table dynamically through an external .js file.

02) I have a filter for the name (first column). (It works fine)

03) I have a multiplication function for each row. (It works fine)

04) I have a min-max function for the 3d column. (It does not work although it used to work).

The link is here : LINK

The code is shown here :

function minmax() {

    filters();
    $.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]);
    });

    var table = $('table').DataTable();
    $('#counter-low, #counter-high').on('keyup', table.draw);
}

where I am also calling the filters function inside. I cannot figure out why it is not working.

UPD : I changed the order of the calls in the header and it works better now. But still not working 100%.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.multiselect.js"></script>
  <script type="text/javascript" language="javascript" src="js/jquery.dataTables.min.js"></script>
  <script type="text/javascript" language="javascript" src="js/allinone.js"></script>

Solution

i can't follow where dataTable should come from but in fact, neither $.fn.dataTable seems to be available or the command $('table').DataTable();

maybe you are missing a script that gives this functionality but if you just want to hide the rows, you could use something like following in min/max (currently its jsut min - i did not complete it - just tested it):

$('table').children('tbody').children('tr').filter(
function (key, element) {
    if (
        parseFloat($(element).children(':nth-child(3)').text())
         < parseFloat($('#counter-low').val())
        ||
        parseFloat($(element).children(':nth-child(3)').text())
         > parseFloat($('#counter-high').val())
    )
        return true;
    else
        return false;
}).css('display', 'none');