Question

我已经使用Bootstrap创建了一个表。当我进行网络呼叫时，表格未填充。

我不确定这是我尝试填充的方式还是返回的JSON对象或两者的组合。

当我检查页面时，get请求返回200。因此该对象返回了，但是表仍然为空，并且在表中不显示JSON对象的任何内容。

这是我在index.html文件中的完整代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Table V01</title>
    <meta charset="UTF-8">

    <!--===============================================================================================-->
        <script src="vendor/jquery/jquery-3.2.1.min.js"></script>
    <!--===============================================================================================-->
        <script src="vendor/bootstrap/js/popper.js"></script>
        <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <!--===============================================================================================-->
        <script src="vendor/select2/select2.min.js"></script>
    <!--===============================================================================================-->
        <script src="js/main.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
    <link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="vendor/perfect-scrollbar/perfect-scrollbar.css">
<!--===============================================================================================-->
    <link rel="stylesheet" type="text/css" href="css/util.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<!--===============================================================================================-->

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>

<!-- Latest compiled and minified Locales -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>


</head>
<body>

    <div class="limiter">
        <div class="container-table100">
            <div class="wrap-table100">
                <div class="table100">
                    <div class="col col-xs-6 text-right">
                        <button class="button-create">
                            <span>New Card +</span>
                        </button>
          </div>
                    <table id="cardTable">
                        <thead>
                            <tr class="table100-head">
                                <th class="column1">Business Name</th>
                                <th class="column2">Card Offer</th>
                                <th class="column3">Active</th>
                            </tr>
                        </thead>

                    </table>
                </div>
            </div>
        </div>
    </div>

<script language="javascript">


self.cardsTable = $('#cardTable').bootstrapTable(
{
    "columnDefs": [
        {"className": "dt-center", "targets": "4"}
    ],
    "autoWidth": false,
    ajax: {
        "url": "http://MY.IP.AD.DRESS/cards",
        "cache": true
    },
    columns: [
        { data: null, 'orderable': false,
                    "render": function (data, type, full, meta) {
                        var cards = 'card';
                        return cards['businessName'];

            }
        },
        { data: null, 'orderable': false,
                    "render": function (data, type, full, meta) {
                        var cards = 'card';
                        return cards['businessName'];

            }
        },
        { data: null, 'orderable': false,
                    "render": function (data, type, full, meta) {
                        var cards = 'card';
                        return cards['businessName'];

            }
        }
    ],
    "order": [[ 2, 'desc' ]]
});

</script>
</body>
</html>

请大家多多了解。这是返回JSON对象的方式：-

{
    "data": {
        "card": [
            {
                "_id": “179”,
                "businessName": “Business 1”
    },
{
                "_id": “180”,
                "businessName": "Business 2”
    },
{
                "_id": “181”,
                "businessName": "Business 3”
    }]
    }
}

如何用Ajax填充Bootstrap表？

0 个答案: