Server-side

[s0By]

Any idea how to make it friendly with server-side solution?

[mpryvkin]

Good point, I will think about it. Most likely, solution with server-side support will have limited features, since counts and presence of data for all letters will not be known.

[zsimaiof]

any update on this?

[mpryvkin]

@zsimaiof, no. Unfortunately, didn't have much time to work on this.

[mpryvkin]

@zsimaiof How do you see it implemented?

I can probably send character selected to the server-side script. You would need to return the appropriate results.

For simplicity I might disable displaying each letter counts however I am not sure.

[zsimaiof]

@mpryvkin i think that the steps would be as following:

1. Send to server-side script the character selected.
2. Server-side script executes a query and returns all the results starting with this character as JSON.
3. Alphabetic Search scripts redraws the table with the returned results.
   In my case i use datatables directly embedded into Wordpress so the results are produced based on a WP_Query but this is not the case
   If you agree, on these steps we shall move on to code details.

If disabling letter counts makes some part easier, please go on and do it.

[s0By]

@zsimaiof you can achieve that by modifying the code yourself.

I needed a similar solution, ended up doing something like this:

$.fn.dataTable.AlphabetSearch = function ( context ) {
        var table = new $.fn.dataTable.Api( context );
        var alphabet = $('<div class="alphabet"/>');

        draw( table, alphabet );

        // Trigger a search
        alphabet.on( 'click', 'span', function () {
            alphabet.find( '.active' ).removeClass( 'active' );
            $(this).addClass( 'active' );
           
            table
                .column('letter:name')
                .search($(this).data('letter'))
                .draw();
        } );

        // API method to get the alphabet container node
        this.node = function () {
            return alphabet;
        };
    };

Obviously not the best solution, but did the job at the time.

[zsimaiof]

@s0By thanks for the update.
You mean replacing the whole default function with this one? cause this doesn't work.
Did you append it somewhere inside the original function?

[zsimaiof]

Guys, need your help here. :)
@s0By can you please give me additional info on where exactly in the script you placed this code snippet;

Thanks a lot

[s0By]

@zsimaiof my solution is not really customizable. I took Michael's code and stripped out everything that I didn't need and adjusted the code to make it work only with server-side. Here you go:

(function(){
// Search function
    $.fn.dataTable.Api.register( 'alphabetSearch()', function ( searchTerm ) {
        this.iterator( 'table', function ( context ) {
            context.alphabetSearch = searchTerm;
        } );

        return this;
    } );

// Recalculate the alphabet display for updated data
    $.fn.dataTable.Api.register( 'alphabetSearch.recalc()', function ( searchTerm ) {
        this.iterator( 'table', function ( context ) {
            draw(
                new $.fn.dataTable.Api( context ),
                $('div.alphabet', this.table().container())
            );
        } );

        return this;
    } );


// Search plug-in
    $.fn.dataTable.ext.search.push( function ( context, searchData ) {
        // Ensure that there is a search applied to this table before running it
        if ( ! context.alphabetSearch ) {
            return true;
        }

        if ( searchData[0].charAt(0) === context.alphabetSearch ) {
            return true;
        }

        return false;
    } );


// Private support methods
    function bin ( data ) {
        var letter, bins = {};

        for ( var i=0, ien=data.length ; i<ien ; i++ ) {
            letter = data[i].charAt(0).toUpperCase();

            if ( bins[letter] ) {
                bins[letter]++;
            }
            else {
                bins[letter] = 1;
            }
        }

        return bins;
    }

    function draw ( table, alphabet )
    {
        alphabet.empty();

        var columnData = table.column(0).data();

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

        for ( var i=0 ; i<26 ; i++ ) {
            var letter = String.fromCharCode( 65 + i );

            $('<span/>')
                .data( 'letter', letter )
                .html( letter )
                .appendTo( alphabet );
        }
    }


    $.fn.dataTable.AlphabetSearch = function ( context ) {
        var table = new $.fn.dataTable.Api( context );
        var alphabet = $('<div class="alphabet"/>');

        draw( table, alphabet );

        // Trigger a search
        alphabet.on( 'click', 'span', function () {
            alphabet.find( '.active' ).removeClass( 'active' );
            $(this).addClass( 'active' );
            
            console.log($(this).data('letter'));

            table
                .column('letter:name')
                .search($(this).data('letter'))
                .draw();

            // table
            //     .alphabetSearch( $(this).data('letter') )
            //     .draw();
        } );

        // API method to get the alphabet container node
        this.node = function () {
            return alphabet;
        };
    };

    $.fn.DataTable.AlphabetSearch = $.fn.dataTable.AlphabetSearch;

// Register a search plug-in
    $.fn.dataTable.ext.feature.push( {
        fnInit: function ( settings ) {
            var search = new $.fn.dataTable.AlphabetSearch( settings );
            return search.node();
        },
        cFeature: 'A'
    } );
}());

[zsimaiof]

@s0By Thanks mate.
Well, i just used your code directly, and reactivated the original plugin...
The positive thing is that no JS error comes up, but nothing really works in terms of selecting by letter.
My basic question is , shouldn't anything be customized in the Server side PHP script to return the records??

You can take a look at yourself here: https://bit.ly/2yEPUfr

[s0By]

@zsimaiof you need to make adjustments on the PHP side as well. If we are talking about my solution, then you need to return a hidden letter column, because I did the searching through a filter param. Then you need to look for this filter param on the server-side and return updated results accordingly.
If you don't want to always return a letter in every object, then you need to modify my code so it would send letter as an extra ajax param when table drawing is done.

[zsimaiof]

@s0By could you please also send me the server-side snippet? That would save me from a lot of time.
thanks for your great help