JSFiddle - React, Tailwind, and code Playground

by Amit Vishwakarma

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<body>
  <table id="vendorListing">
    <tfoot>
      <tr>
        <th class="searchBox">Vendor Location</th>
        <th class="searchBox">Currency</th>
        <th class="searchBox">Vendor Type</th>
        <th class="searchBox">Vendor</th>
      </tr>
    </tfoot>
    <thead>
      <tr>
        <th>Vendor Location</th>
        <th>Currency</th>
        <th>Vendor Type</th>
        <th>Vendor</th>
      </tr>
    </thead>
    <tbody>
      <tr id="1">
        <td>
          <span id="vendorLocation_1" class="vendorLocation">New York</span>
        </td>
        <td>
          <span id="vendorCurrency_1" class="vendorCurrency">American</span>
        </td>
        <td>
          <span id="vendorCurrency_1" class="vendorCurrency">Steel</span>
        </td>
        <td data-search="Vendor Name 2">
          <select id="vendorDropdown_1" class="vendorDropdown">
            <option value="1" selected="selected">Vendor Name 1</option>
            <option value="2">Vendor Name 2</option>
            <option value="3">Vendor Name 3</option>
            <option value="4">Vendor Name 4</option>
            <option value="5">Vendor Name 5</option>
          </select>
        </td>
      </tr>
      <tr id="2">
        <td>
          <span id="vendorLocation_2" class="vendorLocation">Montreal</span>
        </td>
        <td>
          <span id="vendorCurrency_1" class="vendorCurrency">Canadian</span>
        </td>
        <td>
          <span id="vendorCurrency_1" class="vendorCurrency">Plastic</span>
        </td>
        <td>
          <select id="vendorDropdown_2" class="vendorDropdown">
            <option value="1">Vendor Name 1</option>
            <option value="2" selected="selected">Vendor Name 2</option>
           ...

CSS

#vendorListing_wrapper {
	  width: 800px;
	}
	
	
	.odd {
	  background: #dddddd !important;
	}
	
	.even {
	  background: #ffffff;
	}

JavaScript

var vendorTable = "";

 $(function() {


   $('#vendorListing tfoot th.searchBox').each(function() {
     var title = $(this).text();
     $(this).html('<input type="text" placeholder="Search ' + title + '" id="search_' + title.replace(" ", "") + '" />');
   });


   vendorTable = $("#vendorListing").DataTable();
   
  /*  $("#vendorDropdown_1").change(function(){
    $("#check").text($(this).val())
   }); */

   vendorTable.columns().every(function() {
     var that = this;
     $('input', this.footer()).on('keyup change', function() {
       if (that.search() !== this.value) {
         that
           .search(this.value)
           .draw();
       }
     });
   });
$.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex, rowData, counter) {
                    //search_VendorLocation
                    //search_Currency
                    //search_VendorType
                    //search_Vendor       

                    var search_VendorLocationText = $('#search_VendorLocation').val();        
                    var search_CurrencyText = $('#search_Currency').val();        
                    var search_VendorTypeText = $('#search_VendorType').val();
                    var search_VendorText = $('#search_Vendor').val();         
                    var textFound = true;
                    
                    if(search_VendorLocationText.length){
                        var pattern = new RegExp(search_VendorLocationText, 'i');
                        if(pattern.test(data[0])){
                            textFound = true;
                        }else{
                            textFound = false;
                        } 
                    }
                    if(search_CurrencyText.length){
                        var pattern = new RegExp(search_CurrencyText, 'i');
                        if(pattern.test(data[1])){
                            textFound = true;
                        }else{
                           ...