I have integrated responsive data tables with alphabet search functionality in my app and everything seems to be set up correctly.
The code snippet I provided is not working on StackOverflow or I am unable to include it properly there. Please refer to the code on jsfiddle
$(document).ready(function() {
var table = $('#example').DataTable({
ajax: 'https://api.myjson.com/bins/qgcu',
dom: 'Alfrtip',
alphabetSearch: {
column: 0
},
responsive: true
});
});table.dataTable.select tbody tr,
table.dataTable thead th:first-child {
cursor: pointer;
}<script src="https://gyrocode.github.io/jquery-datatables-alphabetSearch/1.1.1/js/dataTables.alphabetSearch.min.js"></script>
<link href="https://gyrocode.github.io/jquery-datatables-alphabetSearch/1.1.1/css/dataTables.alphabetSearch.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/v/dt/dt-1.10.15/r-2.1.1/datatables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/v/dt/dt-1.10.15/r-2.1.1/datatables.min.js"></script>
<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 nowrap" 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>I now want to display the alphabets separately in a different division on the same page, without showing them on top of the datatable.
Is there a way to call and display only the alphabets in a different div? Any help would be greatly appreciated.