<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>FooTable - jQuery plugin for responsive HTML tables</title>
  <meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
  
  <link href="css/footable-0.1.css" rel="stylesheet" type="text/css" />
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
  <script src="js/footable.js" type="text/javascript"></script>
  <script src="js/mustache.js" type="text/javascript"></script>
  <script type="text/javascript">
	 
    $(function() {
		$('table').footable();
	  
		$('.get_data').click(function() {
		
			var url = 'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=json&callback=?';
			
			var template = $('#row_template').val();

			$.getJSON(url,function(response) {
			
				var rows = Mustache.render(template, response.responseData);
				
				$('table tbody').append(rows);
				
				$('table').trigger('footable_initialized');
			});
		});	  
	  
    });


  </script>
</head>
  <body>
  <textarea style="display:none" id="row_template">{{#results}}
<tr>
<td>{{titleNoFormatting}}</td>
<td>{{visibleUrl}}</td>
<td>{{url}}</td>
<td>{{GsearchResultClass}}</td>
</tr>
{{/results}}
  </textarea>
  <a href="#" class="get_data">get more table data via ajax</a>
    <table class="footable">
      <thead>
        <tr>
          <th data-class="expand">
            Title
          </th>
          <th data-hide="phone">
            URL
          </th>
          <th data-hide="phone,tablet">
            Full URL
          </th>
          <th data-hide="phone,tablet">
            Class
          </th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
    
  </body>
</html>
