Why does a JSON data-url for table loads last in the DOM?
<p>In reference to a simple HTML table as this:</p>

<pre><code>&lt;table id="table1"
       data-toggle="table"
       data-url="data1.json"
       data-pagination="true"
       data-sort-order="desc"&gt;
</code></pre>

<p>Can I change the JSON data call from table to precede the javascripts?</p>

<p>I am trying to implement some jquery conditional formatting and I'm noticing that even though I've put my scripts at the bottom, well below the <code>table</code> element, the DOM loads the JSON data last, where i'm suspecting that is why my conditional format is not applying (kindly ratify this in general, if specifics are needed, I'll post my code.)</p>

<blockquote>
  <p>I've added the whole code due to comment requests.</p>
</blockquote>

<p><strong>Here is the full code:</strong>
<strong>HTML:</strong></p>

<pre><code>&lt;table id="table1"
       data-toggle="table"
       data-url="data1.json"
       data-pagination="true"
       data-sort-order="desc"&gt;
    &lt;thead&gt;
    &lt;tr&gt;
        &lt;th data-sortable="true" data-field="name" &gt;Name&lt;/th&gt;
        &lt;th data-sortable="true" data-field="W"&gt;Width&lt;/th&gt;
        &lt;th data-sortable="true" data-field="H"&gt;Height&lt;/th&gt;
        &lt;th data-sortable="true" data-field="D"&gt;Depth&lt;/th&gt;
    &lt;/tr&gt;
    &lt;/thead&gt;
&lt;/table&gt;
</code></pre>

<p><strong>data1.json:</strong></p>

<pre><code>[{
  "name": "First Value",
  "W": 1,
  "H": 10,
  "D": 100
},{
"name": "First Value",
"W": 1,
"H": 10,
"D": 100
},{
"name": "First Value",
"W": 0,
"H": 10,
"D": 100
},...
</code></pre>

<p><strong>Javascript/JQuery:</strong></p>

<pre><code>$(document).ready(function(){
        $('td:nth-child(2)').each(function() {
            var fValue = this.text();
            if (fValue == 0) {
                var oTableRow = $(this).parent();
                oTableRow.css('background-color', 'red');
            }
        });
});
</code></pre>