Simple table view by andrewxhill

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Map - Table</title>
  <meta name="description" content="Template for publishing a map and sortable table">
  <meta name="author" content="andrewxhill">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/png" href="https://cartodb.com/favicon.ico">

  <!-- include cartodb.js library -->
  <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.12/themes/css/cartodb.css" />
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.5/css/jquery.dataTables.css" />

  <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.12/cartodb.js"></script>

  <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.12/cartodb.js"></script>
  <script src="https://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>


  <style type="text/css">
    #container {
      width: 100%;
      padding-left: 5%;
    }
    #map {width: 90%; height: 300px;}

    /*table style from //codepen.io/mastastealth/pen/BHJLb*/
    table { 
      color: #333;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
      width: 90%;
      /* Table reset stuff */
      border-collapse: collapse; border-spacing: 0; 
    }
        
    td, th {  border: 0 none; height: 30px; }
          
    th {
      /* Gradient Background */
      background: linear-gradient(#333 0%,#444 100%);
      color: #FFF; font-weight: bold;
      height: 40px;
      padding: 2px 8px;
    }
        
    td { background: #FAFAFA; text-align: center; }

    /* Zebra Stripe Rows */
        
    tr:nth-child(even) td { background: #EEE; } 
    tr:nth-child(odd) td { background: #FDFDFD; }

    .btn {
      display: inline-block;
      padding: 6px 8px;
      color: #fff;
      font-size: 10px;
      text-decoration: none;
      background: #333;
    }
    .btn:hover {
      cursor: pointer;
      background: #555;
    } 
    .btn.disable {
      cursor: crosshair;
      background: #aaa;
    } 

  </style>

  <script>
    $(document).ready(function() {


      var username = "andrew"
      var table = "aquifrp025";
      var page_len = 10;
      var vizjson = "//team.cartodb.com/api/v2/viz/d647b3fe-cc45-11e4-a52f-0e0c41326911/viz.json";



      var headers = [];
      var types = [];
      var cur_off = 0;
      var skips = ['the_geom', 'the_geom_webmercator', 'created_at', 'updated_at'];
      var rows_tot = 0;

      cartodb.createVis("map", vizjson)

      var sql = cartodb.SQL({ user: username });
      function fillTable(remove){
        sql.execute("SELECT "+headers.join()+" FROM aquifrp025 LIMIT "+page_len+" OFFSET "+cur_off).done(function(data) {
            if(remove){
              $("#cartodb_table").find("tr:gt(0)").remove();
            }
            data.rows.map(function(r) {
                var n = $('<tr></tr>');
                for (h in headers){
                  n.append($('<td></td>').text(r[headers[h]]));
                }
                $('#cartodb_table').append(n);
            });
        });
      }


      sql.execute("SELECT count(*) c FROM "+table+"").done(function(data) {
        rows_tot = data.rows[0].c;
        sql.execute("SELECT * FROM "+table+" LIMIT 0").done(function(data) {
            var n = $('<tr></tr>');
            for (i in data.fields){
              if (skips.indexOf(i) == -1){
                headers.push(i);
                types.push(data.fields[i].type);
                n.append($('<th></th>').text(i));
              }
            }
            $('#cartodb_table').append(n);

            fillTable(false);
        });
      });

      function rowCheck(){
        if(rows_tot < page_len+cur_off){
          $('#next').addClass('disable');
        } else {
          $('#next').removeClass('disable');
        }
        if(cur_off <= 0){
          $('#last').addClass('disable');
        } else {
          $('#last').removeClass('disable');
        }
      }
      $('#next').click(function(){
        cur_off+=page_len;
        fillTable(true);
        rowCheck()
      });
      $('#last').click(function(){
        cur_off-=page_len;
        fillTable(true);
        rowCheck()
      });
    });
          
  </script>
</head>
<body>
  <div id="container">
    <div id="map"></div>
    <table id="cartodb_table" class="display" cellspacing="0" width="100%">
    </table>
    <span id="last" class="btn disable">back</span>
    <span id="next" class="btn">next</span>
  </div>
</body>
</html>