Combined

working

by thatgreg

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css"/>
 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>

<h3 style="text-align:center;">510K Data</h3>

<label>Enter Keyword
<input id="device_name" />
</label>
<div class='error'></div>
<button id='enterbutton'>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>
       ...

CSS

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

JavaScript

$(document).ready(function() {

    $('#enterbutton').click(function() {
				console.log('click')
        $('.error').empty();
        let device_name = $('#device_name').val().trim();
        console.log('deviceName', device_name);
/*         if (!keyword) return $(this).prev('.error').html("Please enter a keyword first"); */
        console.log(`The keyword is ${device_name}`);
  
  var table = $('#example').DataTable({

    destroy: true,
    searching: true,
    /* allows table to be refreshed and     use different keyword to search
    */
    
    ajax: {
      url: `https://api.fda.gov/device/510k.json?search=device_name:${device_name}&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' },
        ],
        // change default entries to any number 
    "pageLength": 100,
    dom: '1Bfrtip', 
    buttons: [{
           ...