如何在引导表中显示 API JSON 数据答案

【问题标题】：How to display API JSON data in bootstrap table如何在引导表中显示 API JSON 数据
【发布时间】：2020-01-07 16:13:14
【问题描述】：

我想使用 etherscan API 加载事件徽标。

它没有添加到引导表中。

我刚开始编码不久。很抱歉有很多错误。

JS：

$.getJSON("https://api-ropsten.etherscan.io/api?module=logs&action=getLogs&fromBlock=379224&toBlock=latest&address=0x96604Ac7312f3ba2c0f778564F0D13bFA5A54faa&topic0=0x5436f9c7563d4b5be022d399b41f15519419cafca0f81c49d0cfbe78b925cbff&apikey=IQN5KP8AKJ9WFTYNGZRJE7W3QHXPT4S65H", function (data) {
    console.log(data);
    $(function () {
        $('table').bootstrapTable({
            data: JSON.parse(data.result)
        });
    });
});

HTML：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
<link href="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.css" rel="stylesheet">

<script src="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.js"></script>

<table
id="#table"
data-toggle="table"
data-silent-sort="false"
data-height="460"
data-pagination="true"
data-side-pagination="server"
data-url="http://api-ropsten.etherscan.io/api?module=logs&action=getLogs&fromBlock=379224&toBlock=latest&address=0x96604Ac7312f3ba2c0f778564F0D13bFA5A54faa&topic0=0x5436f9c7563d4b5be022d399b41f15519419cafca0f81c49d0cfbe78b925cbff&apikey=IQN5KP8AKJ9WFTYNGZRJE7W3QHXPT4S65H">
    <thead>
        <tr>
            <th data-field="address" data-sortable="true">address</th>
            <th data-field="data" data-sortable="true">data</th>
            <th data-field="topics" data-sortable="true">topic</th>
        </tr>
    </thead>
</table>

【问题讨论】：

标签： javascript html json twitter-bootstrap etherscan

【解决方案1】：

根据引导表 data-ajax 是一种替换 ajax 调用的方法。应该实现与 jQuery ajax 方法相同的 API，因此我将其替换为您的适当函数

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
    <link href="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.css" rel="stylesheet">

    <script src="https://unpkg.com/bootstrap-table@1.15.4/dist/bootstrap-table.min.js"></script>

</head>

<body>

    <table id="table" data-toggle="table" data-height="460" data-ajax="ajaxRequest" data-search="true"
        data-side-pagination="server" data-pagination="true">
        <thead>
            <tr>
                <th data-field="address" data-sortable="true">address</th>
                <th data-field="data" data-sortable="true">data</th>
                <th data-field="topics" data-sortable="true">topic</th>
            </tr>
        </thead>
    </table>

    <script>
        // your custom ajax request here
        function ajaxRequest(params) {
            var url = 'https://api-ropsten.etherscan.io/api?module=logs&action=getLogs&fromBlock=379224&toBlock=latest&address=0x96604Ac7312f3ba2c0f778564F0D13bFA5A54faa&topic0=0x5436f9c7563d4b5be022d399b41f15519419cafca0f81c49d0cfbe78b925cbff&apikey=IQN5KP8AKJ9WFTYNGZRJE7W3QHXPT4S65H';
            $.get(url).then(function (res) {
                params.success(res.result)
            })
        }
    </script>
</body>

</html>

【讨论】：