andrewxhill/index.html

## 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 http://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 = "http://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>
	<!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 http://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 = "http://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>