pdt4-theader

by hm123

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<title></title>

	<meta name="description" content="">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	
	<link href="css/test.css" rel="stylesheet" type="text/css" />


	<!--SEMANTIC UI CSS-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css" rel="stylesheet" type="text/css" />

    <link href="https://cdn.datatables.net/1.10.15/css/dataTables.semanticui.min.css" rel="stylesheet" type="text/css" />

    <link href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.semanticui.min.css" rel="stylesheet" type="text/css" />

         

	<style type="text/css">
		html {
			-webkit-text-size-adjust: none;
		}

		



		h1 {
			margin: 0 0 6px 0;
			font-size: 20px;
			color: black;
		}

		h2 {
			font-weight: normal;
			color: #666;
			font-size: 14px;
			margin: 0 0 22px 0;
		}

		.footnotes {
			margin-bottom: 20px;
		}

		.footnotes h4 {
			margin: 2px 0 7px 0;
			color: #666;
			font-size: 11px;
		}

		.footnotes p,
		.footer p {
			margin: 2px 0 0 0;
			font-size: 11px;
			line-height: 1.3;
			color: #808080;
		}

		a,
		a:link,
		a:visited {
			color: #4774CC;
			text-decoration: none;
		}

		a:hover,
		a:active {
			opacity: 0.7;
		}
		/*custom styles*/
    table {
      width: 100%;
    }
		table,
		th {
			text-align: center;
		}
		/*make odd rows lightblue*/

		.table-striped > tbody > tr:nth-child(odd) > td {
			background-color: #f4f7ff;
		}
	</style>
</head>

<body>
	<div class="row">
		<div class="col-xs-12">
			<h1></h1>
			<p></p>
			
		</div>
	</div>

	<div class="row">
		<div class="col-xs-12">
			<div id="graphic"></div>
		</div>
	</div>

	<div class="row">
		<div class="col-xs-12">
			<div class="footnotes">
				<h4></h4>
				<p></p>
			</div>
		</div>

		<div...

CSS

thead {
  display:none;
}

tfoot input {
  width: 100%;
}

tfoot {
    display: table-header-group;
}

table.dataTable tbody td {
  vertical-align: top;
}

.dataTable tbody td.col_3 {
    text-align: right;
    direction: rtl;
    }

JavaScript

//Edit 'key' and 'columns' to connect your spreadsheet

//enter google sheets key here
var key =
  "https://docs.google.com/spreadsheets/d/113QZOTS9JQ1WGfwjwQrOpErUBJTAnaBmdjP0_OjA53c/pubhtml?gid=489792061&single=true";

//"data" refers to the column name with no spaces and no capitals
//punctuation or numbers in your column name
//"title" is the column name you want to appear in the published table
var columns = [{
 "data": "company",
  "title": "Company"
}, {
  "data": "violations",
  "title": "Claims"
}, {
  "data": "total-award",
  "title": "Total Awarded"
}];

$(document).ready(function() {

  function initializeTabletopObject() {
    Tabletop.init({
      key: key,
      callback: function(data, tabletop) {
        writeTable(data); //call up datatables function
      },
      simpleSheet: true,
      debug: false
    });
   }

  initializeTabletopObject();

  function writeTable(data) {
    //select main div and put a table there
    //use bootstrap css to customize table style: http://getbootstrap.com/css/#tables
    $('#graphic').html(
      '<table cellpadding="0" cellspacing="0" border="0" class="ui striped table table-striped table-condensed table-responsive" id="mySelection"></table>'
    );
      
     // Add footer to table
    $("#mySelection").append('<tfoot><tr><th>Company</th><th>Claims</th><th>Total Awarded</th></tr></tfoot>');

    // Setup - add a text input to each footer cell
    $('#mySelection tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Find by '+title+'" />' );
    } );

    //initialize the DataTable object and put settings in
    table=$("#mySelection").DataTable({

      "drawCallback": function( settings ) {
     $("#mySelection thead").remove(); } ,         

      "autoWidth": false,
      "data": data,
      "columns": columns,
      "order": [[0, "asc"]], //display order on column
      "pagingType": "simple",
      "lengthMenu": [ 10, 2, 3, 5, 100 ],...