JSFiddle - React, Tailwind, and code Playground

by jordan_josh3184

HTML

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td></td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td></td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td>$327,900</td>
    </tr>
    <tr>
      <td>Colleen Hurst</td>
      <td>Javascript Developer</td>
      <td>San Francisco</td>
      <td>39</td>
      <td>$205,500</td>
    </tr>
    <tr>
      <td>Sonya Frost</td>
      <td>Software Engineer</td>
      <td>Edinburgh</td>
      <td>23</td>
      <td>$103,600</td>
    </tr>
    <tr>
      <td>Jena Gaines</td>
  ...

JavaScript

$(document).ready(function() {

	$.fn.dataTable.ext.errMode = 'none';	// stop pop-up alerts from datatable errors.
	
	
	$.fn.dataTable.ext.oSort['nullsort-asc']  = function(x,y) {
        if ($.trim(x) == "" || $.trim(x)==" " || x == null) {
				return 1;
			}
			if ($.trim(y) == ""||  $.trim(y)==" "|| y == null) {
				return -1;
			}
			return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    };
    $.fn.dataTable.ext.oSort['nullsort-desc']  = function(x,y) {
        console.log("val of" + x + "val of y" + y);
			if ($.trim(x) == ""|| $.trim(x)==" " || x == null) {
				return -1;
			}
			if ($.trim(y) == ""||  $.trim(y)==" " || y == null) {
				return 1;
			}
			return ((x < y) ? 1 : ((x > y) ? -1 : 0));
    };
    $('#example').DataTable({
    	"pageLength" : -1,
		"lengthMenu" : [ [ 10, 25, 50, -1 ],
				[ 10, 25, 50, "ALL" ] ],
		 columnDefs:
		       getColumnDef()
    });
} );

function getColumnDef(){
	return [
			 { type: 'nullsort', targets: 3},
       { type: 'nullsort', targets: 4}
			
		    ];
}