JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.js"></script>
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Agencies
        <small>Agencies Listing</small>
      </h1>
    </section>

    <!-- Main content -->
    <section class="content container-fluid">

	<div class="box box-info">
		<!--<div class="box-header"></div>-->
		<div class="box-body table-responsive">
				<div class="alert alert-success successmsg hide">
					<button type="button" class="close" data-dismiss="alert" aria-hidden="true">
						Ă—</button>
				   <span class="glyphicon glyphicon-ok"></span> <strong class="msgtitle"></strong> <span class="msgcontent"></span>
				</div>
				
				<div align="right">
					<button type="button" id="add_button" class="btn btn-info btn-md addBtn">Add Agency</button>
				</div><br />		
				<table id="agency_data" class="table table-bordered table-striped">
				<thead>
				<tr class="info">
				<th width="10%">ID</th>
				<th width="15%">Agency Code</th>
				<th width="65%">Agency Name</th>
				<th width="15%">Action</th>
				</tr>
				</thead>
				</table>
		</div>
	</div>

    </section>
	</div>

JavaScript

$(document).ready(function(){
	dataTable = $('#agency_data').DataTable({
		"processing":true,
		"serverSide":true,
		"order":[],
		responsive: true,
		
		"language": {
		"infoFiltered": ""
		},
		"ajax":{
			url:agency_listing.php,
			type:"POST"
		},
		"columnDefs":[
			{
				"targets":[0, 3], //first and last not sortable
				"orderable":false,
			},			
		],

	});	
	});