JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.2/js/buttons.print.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
		<div class="header"><h1>DataTable -startAgain1 test data-  demo (Server side) in Php,Mysql and Ajax </h1></div>
		<div class="container">
			<table id="employee-grid"  cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
					<thead>
						<tr>
							<th>Rec_Open_Date</th>
							<th>MSISDN</th>
							<th>IMEI</th>
							<th>Data_Volume_Bytes</th>
							<th>Device_Manufacturer</th>
							<th>Device_Model</th>
							<th>Product_Description</th>
						</tr>
					</thead>
					<tfoot>
						<tr>
							<th>Rec_Open_Date</th>
							<th>MSISDN</th>
							<th>IMEI</th>
							<th>Data_Volume_Bytes</th>
							<th>Device_Manufacturer</th>
							<th>Device_Model</th>
							<th>Product_Description</th>
						</tr>
					</tfoot>
          <!--START::  tbody here just for example -->
          <tbody>
						<tr>
							<td>Tiger Nixon</td>
							<td>System...

CSS

div.container {
			    /* margin: 0 auto; */
			    max-width:760px;
			}
			div.header {
			    /* margin: 100px auto; */
			    line-height:30px;
			    max-width:760px;
			}
			body {
			    background: #f7f7f7;
			    color: #333;
			    font: 90%/1.45em "Helvetica Neue",HelveticaNeue,Verdana,Arial,Helvetica,sans-serif;
			}
			
			tfoot {
				display: table-header-group;
			}

JavaScript

$(document).ready(function() {
			  // Setup - add a text input to each footer cell
        
         $('#example').DataTable( {
        	dom: 'Bfrtip',
        	buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        	]
    		} );
        
			  $('#employee-grid tfoot th').each(function() {
				  
				console.log("$(this).text()");
				var title = $(this).text();
				$(this).html('<input type="text" placeholder="Search ' + title + '" />');
			  });

			  // DataTable
			  var table = $('#employee-grid').DataTable();

			  // Apply the search
			  table.columns().every(function() {
				var that = this;
				console.log("other)");

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