Sheetrock.js 1.0 Example 2

by orlandotigereye

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://chriszarate.github.io/sheetrock/dist/sheetrock.min.js"></script>
<table id="switch-hitters" class="table table-condensed table-striped"></table>

CSS

<style type="text/css">
	#search{ width: 600px; margin: 50px auto;}
	input{ vertical-align: middle;}
	label{ display: inline-block;}
	#sel{ width: 80px;}
	#txt{ margin-bottom: 0;}
	table{ margin-top: 20px; text-align: center; border: 1px solid #ccc;}
	td{ width: 80px; height: 30px; font: 14px/30px SimSun;}
</style>

JavaScript

//161028 get ping data list sample001
// Sheetrock.js 1.0 Example 2
// https://chriszarate.github.io/sheetrock/

// Let’s look at switch hitters and rank them by batting average. 
// We’ll only grab the columns we care about and fetch just the 
// top ten to help focus the reader’s attention.

// Define spreadsheet URL.
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1ap-uPqCwymMbBSyI0KzlOo0AAbECuCa_r-WLGQudMEs/edit#gid=1366836188';

// Load top ten switch hitters.
$('#switch-hitters').sheetrock({
  url: mySpreadsheet,
  query: "select A,B,D,E,F,G,H where A != '#REF!' and A != '#N/A' order by A desc",
  fetchSize: 350
});