为什么用于表加载的JSON数据url在DOM中最后

Why does a JSON data-url for table loads last in the DOM?

本文关键字：url DOM 最后 数据 JSON 用于 加载 为什么      更新时间：2023-09-26

引用一个简单的HTML表如下：

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

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

我正在尝试实现一些jquery条件格式，我注意到，尽管我把脚本放在了table元素下方的底部，DOM还是最后加载JSON数据，我怀疑这就是为什么我的条件格式不适用的原因(请总的批准这一点，如果需要具体说明，我会发布我的代码。(

由于有评论请求，我添加了整个代码。

这是完整的代码：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');
            }
        });
});

您遇到的问题是异步加载数据，而更改脚本顺序来修复它只会进一步引入竞争条件。解决此问题的最佳方法是在数据加载后挂接。您可以通过两种方式做到这一点，一种是通过ajax手动调用json，然后加载表，这样在加载表时就可以进行回调。第二个选项，我认为是您最好的选择，是使用引导表发出的事件，它是onLoadSuccess。

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