Filter applies for static and not dynamic (from JSON url retrieval) data in HTML table

Question

I have created a table in HTML with static data and also retrieved data from a JSON file (url). I made the rows with the static data have a white background to make it easy to identify :

In the first column, there is an input box. The given value will multiply to the value of the second column and the result will appear in the 3d column.

Now, I added a filter at the top of the page but it only works for the rows with the static data. The link is here : LINK. I also created a snippet to make it easier to see the code. But the snippet would not work for the dynamically loaded data anyway due to the url (it contains https)

$.getJSON(
     'http://apolosiskos.co.uk/TEB/MOCK_DATA.json',
     function(data){
         var tr;
         $.each (data, function (key, val) {
            tr = $('<tr/>');
            tr.append('<td class="stake"><input class="val1"/>' + '</td>');
            tr.append('<td class="odds">' + val.id + '</td>');
            tr.append('<td class="profit"><span class="multTotal">' +'0.00'+ '</span></td>');
            $('table').append(tr);
         });

       $("#counter-low, #counter-high,input").keyup(multInputs);
       });

function multInputs() {
    var mult = 0;

    $("tr").each(function () {
        var $val1 = $('.val1', this).val();
        var $val2 = $('.odds', this).text();
        var $total = ($val1 * 1) * $val2 - $val1
        $('.multTotal', this).text($total.toPrecision(3));
        mult += $total;
    });

    $("#grandTotal").text(mult);
}

$(document).ready(function () {
    var table = $('table').DataTable();
    $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
        return parseFloat(data[1]) >= parseFloat($('#counter-low').val() || data[1]) 
            && parseFloat(data[1]) <= parseFloat($('#counter-high').val() || data[1])
    });
    $('#counter-low, #counter-high').on('keyup', table.draw);
});

h1{
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 300;
  text-align: center;
  margin-bottom: 15px;
}
table{
  width:100%;
  table-layout: fixed;
}
.tbl-header{
  background-color: rgba(255,255,255,0.3);
 }
.tbl-content{
  height:300px;
  overflow-x:auto;
  margin-top: 0px;
}

th{
  padding: 20px 15px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
}
td{
  padding: 10px;
  text-align: left;
  vertical-align:middle;
  font-weight: 300;
  font-size: 12px;
  color: #fff;

}

tr:nth-child(odd) td {
  background:#2cc3ce;
  color:#0d3852;
}

/* demo styles */

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,300,700);
body{
  background: #0d3852;
  font-family: 'Roboto', sans-serif;
}
section{
  margin: 50px;
}

input {
max-width:50px;
}

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.ac-custom {
 padding: 0 1em;
 max-width: 900px;
 margin: 0 auto;
}

.ac-custom h2 {
 font-size: 1em;
 font-weight: 300;
 padding: 0 0 0.5em;
 margin: 0 0 30px;
 color:#0d3852;
}

.ac-custom ul,
.ac-custom ol {
 list-style: none;
 padding: 0;
 margin: 0 auto;
 max-width: 800px;
}

.ac-custom li {
 margin: 0 auto;
 padding: 0.5em 0;
 position: relative;
}

.ac-custom label {
 display: inline-block;
 position: relative;
 font-size: 1em;
 padding: 0 0 0 80px;
 vertical-align: top;
 color: #0d3852;
 cursor: pointer;
 -webkit-transition: color 0.3s;
 transition: color 0.3s;
}

.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"],
.ac-custom label::before {
 width: 20px;
 height: 20px;
 top: 50%;
 left: 0;
 margin-top: -12px;
 position: absolute;
 cursor: pointer;
}

.ac-custom input[type="checkbox"],
.ac-custom input[type="radio"] {
 opacity: 0;
 -webkit-appearance: none;
 display: inline-block;
 vertical-align: middle;
 z-index: 100;
}

.ac-custom label::before {
 content: '';
 border: 1px solid #0d3852;
 -webkit-transition: opacity 0.3s;
 transition: opacity 0.3s;
}

.ac-radio label::before {
 border-radius: 50%;
}

.ac-custom input[type="checkbox"]:checked + label,
.ac-custom input[type="radio"]:checked + label {
 color: #fff;
} 

.ac-custom input[type="checkbox"]:checked + label::before,
.ac-custom input[type="radio"]:checked + label::before {
 opacity: 0.8;
}

/* General SVG and path styles */

.ac-custom svg {
 position: absolute;
 width: 20px;
 height: 20px;
 top: 50%;
 margin-top: -12px;
 left: 0px;
 pointer-events: none;
}

.ac-custom svg path {
 stroke: #0d3852;
 stroke-width: 13px;
 stroke-linecap: round;
 stroke-linejoin: round;
 fill: none;
}

/* Specific input, SVG and path styles */

/* Circle */
.ac-circle input[type="checkbox"],
.ac-circle input[type="radio"],
.ac-circle label::before {
 width: 30px;
 height: 30px;
 margin-top: -15px;
 left: 10px;
 position: absolute;
}

.ac-circle label::before {
 background-color: #fff;
 border: none;
}

.ac-circle svg {
 width: 70px;
 height: 70px;
 margin-top: -35px;
 left: -10px;
}

.ac-circle svg path {
 stroke-width: 5px;
} 

/* Box Fill */
.ac-boxfill svg path {
 stroke-width: 8px;
} 

/* Swirl */
.ac-swirl svg path {
 stroke-width: 8px;
}

/* List */
.ac-list ol {
 list-style: decimal;
 list-style-position: inside;
}

.ac-list ol li {
 font-size: 2em;
 padding: 1em 1em 0 2em;
 text-indent: -40px;
}

.ac-list ol li label {
 font-size: 0.5em;
 text-indent: 0;
 padding-left: 30px;
}

.ac-list label::before {
 display: none;
}

.ac-list svg {
 width: 100%;
 height: 80px;
 left: 0;
 top: 1.2em;
 margin-top: 0px;
}

.ac-list svg path {
 stroke-width: 4px;
}

.row {
  margin-left: -15px;
  margin-right: -15px;
  margin-top:0;
}
.col-sm-4 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 30px;
}

@media (min-width: 768px) {
  .col-sm-4 {
    float: left;
  }

  .col-sm-4 {
    width: 33.33333333%;
  } 
 
 .filter-columns {
 background-color:#2cc3ce;
 }
 
 .filter-columns-alt {
 background-color:#78D9E0;
 min-height:256px;
 }

<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.dataTables.min.js"></script>

                <div class="col-sm-4 filter-columns-alt">
                    <form class="ac-custom ac-checkbox ac-cross" autocomplete="off">
      <h2>MIN - MAX</h2>
      Min:<input id="counter-low" type="text" /> &nbsp; 
      Max:<input id="counter-high" type="text" />
     </form>
                </div>

<table>
    <thead>
        <tr id="ProductID" class="first">
            <th>A1</th>
            <th>A2</th>
   <th>A3</th>
        </tr>
    </thead>
    <tbody>
        <tr class="txtMult">
            <td class="stake"><input class="val1"/></td>
            <td class="odds">2.2</td>
   <td class="profit"><span class="multTotal">0.00</span></td>
        </tr>
        <tr class="txtMult">
            <td class="stake"><input class="val1"/></td>
            <td class="odds">2.2</td>
   <td class="profit"><span class="multTotal">0.00</span></td>
        </tr>

    </tbody>
  </table>

Answer 1

You're initializing the plugin too early. This gets called before your ajax call has finished:

$('table').DataTable();

It's very apparent if you look at the markup. even and odd classes are only applied to first two columns and not the rest because they're added after the plugin has already been initialized.