Filterable Socrata table

by gricha2380

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<!-- 
    Reference:
    https://datatables.net/examples/data_sources/ajax.html 
-->


</head>
<body>

<label for="ward">Ward</label>
<select id="ward">
  <option value="01">1</option>
  <option value="02">2</option>
  <option value="03">3</option>
</select>


<label for="year">Year</label>
<select id="year">
  <option value="2017">2017</option>
  <option value="1997">1997</option>
</select>

<hr>
    <table id="table" class="display" style="width:100%">
        <thead>
            <tr>
              <th>Year</th>
              <th>Dwelling Type</th>
              <th>Ward</th>
              <th>Count</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
              <th>Contact</th>
              <th>City</th>
              <th>County</th>
               <th>Count</th>
            </tr>
        </tfoot>
    </table>
    <script>
   $('#table').dataTable();			
let year = Number($('#year').val());
let ward = $('#ward').val();
console.log(year,ward)
// Construct a SODA query string - I'm using the farmers market data for my experiment
url = `https://gregor.demo.socrata.com/resource/nh9v-72sj.json?$WHERE=ward="${ward}" AND census_year between "${year}" and "${year+1}" &$order=census_year DESC&$limit=5000`;

console.log("real URL", url)

// Use jQuery Ajax Awesomeness to acquire data from data.ny.gov (Socrata)
$.getJSON(url, function(data, textstatus) {
      // Loop over result set
      $.each(data, function(i, column) {
         // for each json record, add a row to the HTML table
        ...