Skip to content

Instantly share code, notes, and snippets.

@RuolinZheng08

RuolinZheng08/index.html

Last active January 31, 2021 20:48
Show Gist options
  • Save RuolinZheng08/3882d38210a25070bc05740298c73706 to your computer and use it in GitHub Desktop.
Save RuolinZheng08/3882d38210a25070bc05740298c73706 to your computer and use it in GitHub Desktop.
Download ZIP
[Template] DataTable in HTML/JavaScript With JSON Data
Raw
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>2019 Grace Hopper Company Look-Up</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css'>
</head>
<body>
<!-- partial:index.partial.html -->
<div align="center">
<h1 style="padding: 20px">2019 Grace Hopper Exhibitor List</h1>
<img src="ghc.png" style="max-width: 20%" alt="GHC logo">
</div>
<div class="container">
<table id="table" class="table">
<thead>
<tr>
<th>Booth #</th>
<th>Company Name</th>
<th>Industry</th>
<th>Description</th>
<th>Website</th>
</tr>
</thead>
</table>
</div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js'></script>
<script src="./script.js"></script>
</body>
</html>
Raw
script.js
$(document).ready(function() {
$.getJSON('data.txt', function(json) {
$('#table').DataTable({
data: json['companies'],
columns: [
{data: 'booth'},
{data: 'name'},
{data: 'industry'},
{data: 'description'},
{data: 'url'}
]
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment