JSFiddle - React, Tailwind, and code Playground

by jordan_josh3184

HTML

<!DOCTYPE html>
<html>
<head>
<head>
 <script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js"></script>
 <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 <script type="text/javascript" src="script.js"></script>
 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">
</head>
<style>
     .dataTable > thead > tr > th[class*="sort"]::after{display: none}
</style>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
	<div class="container">
		<table id="example" class="display" style="width: 80%">
			<thead>
				<tr>
					<th>FirstName</th>
					<th>LastName</th>
					<th>City</th>
					<th>Country</th>
					<th>Office</th>
					<th>Phone number</th>
				</tr>
			</thead>
		</table>

	</div>
</body>
</html>

JavaScript

// Server-side processing with object sourced data
var data = [{
  "FirstName": "John",
  "LastName": "Stroops",
  "City": "Las Vegas",
  "Country": "USA",
  "Office": "Las Vegas",
  "Phone Number": "2045556789"
}, {
  "FirstName": "Nick",
  "LastName": "Jonas",
  "City": "Los Angeles",
  "Country": "USA",
  "Office": "Los Angeles",
  "Phone Number": "2408564578"

}, {
  "FirstName": "Priyanka",
  "LastName": "Jonas",
  "City": "New York",
  "Country": "USA",
  "Office": "New York",
  "Phone Number": "5612547845"
}];
$(document).ready(function() {
  $('#example thead').on('click', 'th', function() {
    var index = $('#example').DataTable().column(this).index();
    alert('index : ' + index);

  });
  $('#example').DataTable({
    data: data,
    "aaSorting": [],
    "columnDefs": [{
        "targets": [2],
        "visible": false,
        "searchable": true
      },
      {
        "targets": [3],
        "visible": true,
        "searchable": true
      },
      {
        "targets": [5],
        "visible": true,
        "searchable": false
      }
    ],
    columns: [{
        data: "FirstName",
        "orderData": [0, 1, 2, 3]
      }, //DUMMY_REV_ORDER,APPLID_SORT,IC_SUBPROJECT_FLAG,PI_LAST_NAME,DUMMY_IC_SUBPRJ,GRANT_NUMBER,REV_TYPE_ORDER_CODE,DUMMY_SCORE
      {
        data: "LastName",
        "orderData": [0, 2, 3, 4]
      },
      {
        data: "City",
        "orderData": [0, 2, 3, 4]
      },
      {
        data: "Country",
        "orderData": [1, 2]
      },
      {
        data: "Office",
        "orderData": [4, 0, 1]
      },
      {
        data: "Phone Number",
        "orderData": [5, 1]
      }
    ]
  });
});