block by davo 47baeb2495881063c22a3e1fd46bb6a8

Plantilla para Tabla usando Sheetsee.js

Full Screen

index.html


<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Sheetsee Demo Tabla</title>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'/>
    <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js'></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.3.5/tabletop.min.js"></script>
    <script type='text/javascript' src='https://cdn.rawgit.com/jlord/sheetsee.js/master/js/sheetsee.js'></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
    <style>

      html {
        position: relative;
        min-height: 100%;
      }
      body {
        padding-top: 50px;
        margin-bottom: 60px;
      }

      #Pagination a {cursor: pointer;}

      .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        /* Set the fixed height of the footer here */
        background-color: #f5f5f5;
      }


    </style>
  </head>
<body>
  <div class="container">
    
    <div class="panel panel-default">
       <div class="panel-heading">
         <h1>Sheetsee.js</h1>
         <h2>Properati</h2>
         <h3>Alquileres en CABA, 2016</h3>
         <input id="fullTableFilter" type="text" placeholder="Filtrar.." class="form-control"></input>
       </div>
      <div class="panel-body">
        <div id="loading">Cargando datos...</div>
        <div class="container-fluid">
          <div id="fullTable"></div>
        </div>
      </div>
    </div>
    
  </div>

  <footer class="footer">
    <div class="container">
      <p class="navbar-text"><a href="https://docs.google.com/spreadsheet/ccc?key=1tPbgHcFoX1snKdCC5NdrRYST5WovHcg6fjfM0_e7kiE&usp=drive_web#gid=1783991526" target="_blank">Google Sheet Público</a></p>
      <p class="navbar-text navbar-right">Datos provistos por <a href='//www.properati.com.ar'>Properati</a></p>
    </div>
  </footer>

<script id="fullTable_template" type="text/html">
  <table class="table table-hover">
    <tr>
      <th class="tHeader">Fecha</th>
      <th class="tHeader">Barrio</th>
      <th class="tHeader">Tipo de propiedad</th>
      <th class="tHeader">Moneda</th>
      <th class="tHeader">Precio</th>
      <th class="tHeader">Metros &sup2;</th>
    </tr>
    
    {{#rows}}
      <tr>
        <td>{{createdon}}</td>
        <td>{{placename}}</td>
        <td>{{propertytype}}</td>
        <td>{{currency}}</td>
        <td>{{price}}</td>
        <td>{{surfacecoveredinm2}}</td>
      </tr>
    {{/rows}}
  </table>
</script>


<script type="text/javascript">


  document.addEventListener('DOMContentLoaded', function() {

    var URL = "1tPbgHcFoX1snKdCC5NdrRYST5WovHcg6fjfM0_e7kiE"
    Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
  })

  function showInfo(data) {

    $('#loading').fadeOut();
    
    var tableOptions = {"data": data, "pagination": 100, "tableDiv": "#fullTable", "filterDiv": "#fullTableFilter"}

    Sheetsee.makeTable(tableOptions)
    Sheetsee.initiateTableFilter(tableOptions)

  }


</script>

</body>
</html>