javascript - 为什么表加载的 JSON 数据 URL 最后出现在 DOM 中？

Question

引用一个简单的 HTML 表格，如下所示:

<table id="table1"
       data-toggle="table"
       data-url="data1.json"
       data-pagination="true"
       data-sort-order="desc">

我可以将表中的 JSON 数据调用更改为在 javascript 之前吗？

我正在尝试实现一些 jquery 条件格式，我注意到即使我将脚本放在底部，远低于 table 元素，DOM 最后加载 JSON 数据，我怀疑这就是我的条件格式不适用的原因(请总体上批准这一点，如果需要具体细节，我将发布我的代码。)

I've added the whole code due to comment requests.

这是完整的代码: HTML:

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

data1.json:

[{
  "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
},...

Javascript/JQuery:

$(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');
            }
        });
});

Answer 1

您遇到的问题是您正在异步加载数据，并且更改脚本顺序来修复它只会进一步引入竞争条件。解决这个问题的最佳方法是在数据加载时进行 Hook 。您可以通过两种方式执行此操作，或者通过 ajax 手动调用 json，然后加载表，以便在加载时获得回调。我认为最好的第二个选项是使用引导表发出的事件 onLoadSuccess。

$('#table1').on('load-success.bs.table', function (e, arg1, arg2, ...) {
    // your jquery modifications go here
});