使用JSON响应的数据表

Datatables using JSON response

本文关键字：数据表 响应 JSON 使用      更新时间：2023-09-26

我试图加载JSON响应从谷歌购物到一个表在html格式使用数据表，JQuery插件。

我正在添加数据到表div，但它似乎不工作。

    <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Currency</th>
                <th>Price</th>
                <th>Shipping</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
        <tfoot>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Currency</th>
                <th>Price</th>
                <th>Shipping</th>
            </tr>
        </tfoot>
    </table>
    <script>
        var apiKey = "key";
        var country = "US";
        var apiurl = "https://www.googleapis.com/shopping/search/v1/public/products?callback=?";

        $(document).ready(function() { 
          $('#example').dataTable();
            $('.button').click(function (e) {
            $('#example').empty();
        e.preventDefault();
        $.ajax({
        type: "GET",
        url: apiurl,
        dataType: 'jsonp',
            data : 
        {
           key: apiKey, 
               country: country, 
               q: $('[name=myanswer]').val()    
            },
            success: function(data) {
            $.each(data.items, function(i, item){
            if (item.product.images.length > 0) // sanity check
            {
                //global variables
                var link = item.product.images[0]['link'];
                var title = item.product.title;
                var gtin = item.product.gtins[0];
                //price
                var currency = item.product.inventories[0]['currency'];
                var price = item.product.inventories[0]['price'];
                var shipping = item.product.inventories[0]['shipping'];
                var listData = "<li>" + title + gtin + price + currency + shipping + "</li>" + '<img title="' + title + '" src="' + link + '" />';
                var dataTable =
                "<tr>" +
                    "<td>" + '<img title="' + title + '" src="' + link + '" />' + "</td>" +
                    "<td>" + gtin + "</td>" +
                    "<td>" + title + "</td>" +
                    "<td>" + currency + "</td>" +
                    "<td>" + price + "</td>" +
                    "<td>" + shipping + "</td>" +
                    "</tr>";
                        $('#example').append(dataTable).hide().fadeIn('slow');
                        console.log(data)
   }
   });
   }
   });
   });
   });

更新:在Larry的帮助下，我已经设法将数据加载到表中。我知道底部的数字是有人口的。但是，数据根本不显示。

<!DOCTYPE html>
<html>
<head>
  <style>
  #images { padding:0; margin:0; overflow: hidden;}
  #images img { width:200px; height:200px; border:none;}
  td {
  padding-top: 2px;
  padding-bottom: 2px;
  padding-right: 20px;
}
  #example img { width:50px; height: 50px; }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script src="jquery.dataTables.js"></script>
</head>
<body>
<form id="myform">
   <input type="text" name="myanswer" value="test">
   <input type='submit' class="button" name="submitButton" value='submit'>
</form>
<table id="example">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>etc</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
            <td>etc</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>etc</td>
        </tr>
    </tbody>
</table>
<script>
    var apiKey = "key";
    var country = "US";
    var apiurl = "https://www.googleapis.com/shopping/search/v1/public/products?callback=?";

    $(document).ready(function() { 
    $('#example').dataTable();
            $('.button').click(function (e) {
            $('#example').empty();
                e.preventDefault();
                    $.ajax({
                    type: "GET",
                    url: apiurl,
                    dataType: 'jsonp',
                    data : 
                    {
                        key: apiKey, 
                        country: country, 
                        q: $('[name=myanswer]').val()   
                        },
                    success: function(data) {
                         $.each(data.items, function(i, item){
                            if (item.product.images.length > 0) // sanity check
                            {
                            //global variables
                            var link = item.product.images[0]['link'];
                            var title = item.product.title;
                            var gtin = item.product.gtins[0];
                            //price
                            var currency = item.product.inventories[0]['currency'];
                            var price = item.product.inventories[0]['price'];
                            var shipping = item.product.inventories[0]['shipping'];
                            $('#example').dataTable().fnAddData( [
                            title,
                            gtin,
                            price
                            ]);
                            }
                        });
     }
   });
  });

});

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

假设您的AJAX调用正在工作并返回数据，向jQuery数据表添加一行的正确方法不是尝试编辑底层HTML，而是让数据表通过数据表API调用fnAddData()添加行。

这里有一个例子

相关文章：