jQuery DataTables – Alphabetical Search

Example for article at http://www.gyrocode.com/articles/jquery-datatables-alphabetical-search/

HTML

<script src="https://cdn.datatables.net/t/dt/dt-1.10.11/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/t/dt/dt-1.10.11/datatables.min.css">
<script src="//gyrocode.github.io/jquery-datatables-alphabetSearch/1.1.1/js/dataTables.alphabetSearch.min.js"></script>
<link rel="stylesheet" href="//gyrocode.github.io/jquery-datatables-alphabetSearch/1.1.1/css/dataTables.alphabetSearch.css">
<h3><a href="http://www.gyrocode.com/articles/jquery-datatables-alphabetical-search/">jQuery DataTables – Alphabetical Search</a></h3>
<a href="http://www.gyrocode.com/articles/jquery-datatables-alphabetical-search/">See full article on Gyrocode.com</a>
<hr><br>
    
<table id="example" class="display" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Extn</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th>Name</th>
         <th>Position</th>
         <th>Office</th>
         <th>Age</th>
         <th>Start date</th>
         <th>Salary</th>
      </tr>
   </tfoot>
</table>

CSS

table.dataTable.select tbody tr,
table.dataTable thead th:first-child {
   cursor: pointer;
}

JavaScript

$(document).ready(function(){
   var table = $('#example').DataTable({
      ajax: 'https://api.myjson.com/bins/qgcu',
      dom: 'Alfrtip',
      alphabetSearch: {
         column: 0
      }      
   });
});