Top

Added columns - working

by thatgreg

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<h3>510K Data</h3>
<p>Enter Keyword</p>
<input id="myInput" value="">
<button id="myButton" onclick="javascript:alert('Data Shows Here')">Enter</button>
<hr>
<div class="container">
  <table id="example" class="display nowrap" width="100%">
    <thead>
      <tr>
        <th>Applicant</th>
        <th>K Number</th>
        <th>Clearance Type</th>
        <th>Product Code</th>
        <th>Regulation Number</th>
        <th>Device Name</th>
        <th>Advisory Committee</th>
        <th>Date Received</th>
        <th>Decision Date</th>
        <th>Decision Code</th>
        <th>Expidited Review Flag</th>
        <th>Third Party Flag</th>
        <th>Device Class</th>
        <th>Statement or Summary</th>
        <th>Review Advisory Committee</th>
        <th>Decision Description</th>
        <th>Country Code</th>
        <th>State</th>
        <th>Address</th>
        <th>City</th>
        <th>Contact</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
      </tr>
    </tfoot>
  </table>
</div>

CSS

/* CSS styles */
h1 {
font-family: Impact, sans-serif;
color: #CE5937;
}

JavaScript

$(document).ready(function() {
  var table = $('#example').DataTable({
    ajax: {
      url: 'https://api.fda.gov/device/510k.json?search=device_name:glucose&limit=1000',
      cache: true,
      dataSrc: function(response) {
        return response.results.map(function(record) {
          if (record.openfda) {
            record.regulation_number = record.openfda.regulation_number || '';
            record.device_class = record.openfda.device_class || '';
            delete record.openfda;
          }
          return record;
        });
      }
    },
    columns: [
      { data: 'applicant' },
      { data: 'k_number' },
      { data: 'clearance_type' },
      { data: 'product_code' },
      { data: 'regulation_number' },
      { data: 'device_name' },
      { data: 'advisory_committee_description' },
      { data: 'date_received' },
      { data: 'decision_date' },
      { data: 'decision_code' },
      { data: 'expedited_review_flag' },
      { data: 'third_party_flag' },
      { data: 'device_class' },
      { data: 'statement_or_summary' },
      { data: 'review_advisory_committee' },
      { data: 'decision_description' },
      { data: 'country_code' },
      { data: 'state' },
      { data: 'address_1' },
      { data: 'city' },
      { data: 'contact' },
    ],
    buttons: [{
        extend: 'copyHtml5',
        exportOptions: {
          orthogonal: 'export'
        }
      },
      {
        extend: 'excelHtml5',
        exportOptions: {
          orthogonal: 'export'
        }
      },
      {
        extend: 'csvHtml5',
        exportOptions: {
          orthogonal: 'export'
        }
      },
      {
        extend: 'pdfHtml5',
        exportOptions: {
          orthogonal: 'export'
        }
      }
    ]
  });
});

// Gets the input field
var input = document.getElementById("myInput");
// Execute a function when the user releases a key on the keyboard
input.addEventListener("keyup", function(event) {

  if (event.keyCode === 13) {
    // 13...