title: Datatables using JSON response
body: <p>I'm trying to load a JSON response from Google Shopping into a table in html formatted using DataTables, the JQuery plugin.</p>
  
  <p>I'm appending the data to the table div but it does not seem to be working.</p>
  
  <pre><code>    &lt;table cellpadding="0" cellspacing="0" border="0" class="display" id="example"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;th&gt;Title&lt;/th&gt;
                  &lt;th&gt;Currency&lt;/th&gt;
                  &lt;th&gt;Price&lt;/th&gt;
                  &lt;th&gt;Shipping&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
          &lt;/tbody&gt;
          &lt;tfoot&gt;
              &lt;tr&gt;
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;th&gt;Title&lt;/th&gt;
                  &lt;th&gt;Currency&lt;/th&gt;
                  &lt;th&gt;Price&lt;/th&gt;
                  &lt;th&gt;Shipping&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tfoot&gt;
      &lt;/table&gt;
  
      &lt;script&gt;
  
          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 &gt; 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 = "&lt;li&gt;" + title + gtin + price + currency + shipping + "&lt;/li&gt;" + '&lt;img title="' + title + '" src="' + link + '" /&gt;';
  
                  var dataTable =
                  "&lt;tr&gt;" +
                      "&lt;td&gt;" + '&lt;img title="' + title + '" src="' + link + '" /&gt;' + "&lt;/td&gt;" +
                      "&lt;td&gt;" + gtin + "&lt;/td&gt;" +
                      "&lt;td&gt;" + title + "&lt;/td&gt;" +
                      "&lt;td&gt;" + currency + "&lt;/td&gt;" +
                      "&lt;td&gt;" + price + "&lt;/td&gt;" +
                      "&lt;td&gt;" + shipping + "&lt;/td&gt;" +
                      "&lt;/tr&gt;";
  
                          $('#example').append(dataTable).hide().fadeIn('slow');
                          console.log(data)
     }
     });
  
     }
     });
     });
     });
  </code></pre>
  
  <p>Update: With Larry's help, I've managed to get the data loading into the table. I know this as the number at the bottom is populated. However, the data is not displaying at all.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;style&gt;
    #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; }
    &lt;/style&gt;
    &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="jquery.dataTables.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;form id="myform"&gt;
     &lt;input type="text" name="myanswer" value="test"&gt;
     &lt;input type='submit' class="button" name="submitButton" value='submit'&gt;
  &lt;/form&gt;
  
  &lt;table id="example"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Column 1&lt;/th&gt;
              &lt;th&gt;Column 2&lt;/th&gt;
              &lt;th&gt;etc&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td&gt;Row 1 Data 1&lt;/td&gt;
              &lt;td&gt;Row 1 Data 2&lt;/td&gt;
              &lt;td&gt;etc&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Row 2 Data 1&lt;/td&gt;
              &lt;td&gt;Row 2 Data 2&lt;/td&gt;
              &lt;td&gt;etc&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;script&gt;
  
      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 &gt; 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
                              ]);
  
                              }
                          });
  
       }
     });
    });
  
  
  
  });
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>