D-Net

var tableOptions = {};

var table = null;

tableOptions  = {

     "order": [[ 0, "asc" ]],

    "dom": '<"top">rt<"bottom"><"clear">',

"paging": false

};

window.onload = function() {

    var outer = $('<div class="featured_top maincolumn2_top">');

    var alphabet = $('<div class="alphabet">').appendTo( outer );

    for ( var i=0 ; i<26 ; i++ ) {

        var letter = String.fromCharCode( 65 + i );

        $('<span class="alphaLetter">').data('letter', letter).html(letter).appendTo( alphabet );

    }

     $('<span class="clear active alphaLetter"/>').data( 'letter', '' ).html( 'ALL' ) .appendTo( alphabet );

    outer.insertBefore( '#listtbl');

    var table = jQuery('.data-table').DataTable(tableOptions);

    var _alphabetSearch;

    $.fn.dataTable.ext.search.push( function ( settings, searchData ) {

        if ( ! _alphabetSearch ) { // No search term - all results shown

            return true;

        }

        var word = searchData[0].replace(/\s+/g, '');

        if ( word.charAt(0) === _alphabetSearch ) {

            return true;

        }

        return false;

    } );

     alphabet.on( 'click', 'span', function () {

        alphabet.find( '.active' ).removeClass( 'active' );

        $(this).addClass( 'active' );

        _alphabetSearch = $(this).data('letter');

        table.draw();

    } );

};