JSFiddle - React, Tailwind, and code Playground

by ktpmm5

HTML

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

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="Scan Data">
  <meta name="keywords" content="ui kit">
  <meta name="author" content="CSTT">
  <title>Scan Data</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="css/responsive.css">
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="css/datatables.min.css">
  <link rel="stylesheet" href="css/searchPanes.bootstrap4.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <!-- Page Wrapper Start -->
  <div class="wrapper">
    <!-- Content Area Start -->
    <div id="content">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="page-header-title">
              <h2 class="heading-title text-center">Scan Data</h2>
            </div>

            <div class="mb-60">&nbsp;</div>

            <div class="table">
              <div class="sub-title">
                <span>Test Networks</span>
              </div>
              <div class="table-responsive mtb">
                <table class="table datatable table-bordered table-striped" id="scandata"  style="width:100%">
                  <thead class="table-info">
                    <tr>
                      <th>Device ID</th>
                      <th>Hostname</th>
                      <th>IP Address</th>
                      <th>MAC Address</th>
                      <th>Open Ports</th>
                      <th>Network</th>
                      <th>OS</th>
                      <th>Status</th>
                    </tr>
                  </thead>

                  <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>hostname 1</td>
                    <td>10.10.10.10</td>
   ...

JavaScript

$(document).ready(function() {

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

  // $('#scandata tfoot tr').appendTo('#scandata thead');

  var table = $('#scandata').DataTable ({
    "serverSide": true,
    "processing": true,
    "ajax": "includes/server_processing.php",
     "columnDefs": [
      { "width": "5%", "targets": 0 }
    ],   
    initComplete: function() {
      // apply the searchable
      this.api().columns().every( function() {
      var that = this;

      $( 'input', this.footer() ).on( 'keyup change clear', function() {
        if ( that.search() !== this.value) {
          that
            .search( this.value )
            .draw();
        }
      });
    });
    }
  });