I want use "Alphabet input search" along with server-side processing?

pagwekar

I tried adding code from "Alphabet input search" series but it doesn't work?

Below is my page code:
<apex:page controller="DataTableController" readOnly="true">
<apex:includeScript value="https://code.jquery.com/jquery-2.2.3.min.js" />
<apex:includeScript value="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js" />
<script src="/soap/ajax/36.0/connection.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css"/>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>

<script type="text/javascript">

    sforce.connection.sessionId = '{!$Api.Session_ID}'; 
    var _alphabetSearch;          
    var table;     
    $.fn.dataTable.ext.search.push( function ( settings, searchData ) {
        alert(_alphabetSearch);

        if ( ! _alphabetSearch ) {
            return true;
        }
        if ( searchData[0].charAt(0) === _alphabetSearch ) {
            return true;
        }

        return false;
    } );

    function buildTable() {             

            var fields = ['Name', 'Email' , 'Title'];

            var aoColumns = [];
            for (var i = 0; i < fields.length; i++) {
                aoColumns.push({'mData': fields[i]});
            }

            table = $('#example').DataTable({
                    'aoColumns': aoColumns,
                    'bDeferRender' : true,
                    'bProcessing': true,
                    'bServerSide': true,
                    'bFilter': true,
                    'sAjaxSource': 'fakeUrl',
                    'fnServerData': function(sSource, aoData, fnCallback) {
                       // console.log(JSON.stringify(aoData));
                        // Call the @RemoteAction JavaScript function
                        DataTableController.contacts(aoData, function(result, event) {
                            if (event.type != 'exception') {
                                //console.log(JSON.stringify(result));
                                for (var i = 0; i < result.aaData.length; i++) {
                                    var r = result.aaData[i];
                                    for (var j = 0; j < fields.length; j++) {
                                        var field = fields[j];
                                        if (r[field] == undefined) {
                                            // DataTables pops a dialog for undefined values
                                            r[field] = null;
                                        }
                                        else if (field == 'Birthdate') {
                                            // Dates transmitted as longs
                                            var d = new Date(r[field]);
                                            r[field] = ''
                                                    + (d.getMonth() + 1)
                                                    + '/'
                                                    + d.getDate()
                                                    + '/'
                                                    + d.getFullYear()
                                                    ;
                                        }
                                    }
                                }
                                // Call back into the DataTable function
                                fnCallback(result);
                            } else {
                                alert(event.message);
                            }
                        });
                    }
                });

                var alphabet = $('<div class="alphabet"/>').append( 'Search: ' );

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

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

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

                alphabet.insertBefore( table.table().container() );

                alphabet.on( 'click', 'span', function () {
                    alphabet.find( '.active' ).removeClass( 'active' );
                    $(this).addClass( 'active' );

                    _alphabetSearch = $(this).data('letter');
                    table.draw();
                } );        

    }


    $(document).ready(function() { 
        buildTable();
    });

</script>

<style>
    div.alphabet {
        position: relative;
        display: table;
        width: 100%;
        margin-bottom: 1em;
        width: 56%;
        float: right;
        font-weight: bold;
    }

    div.alphabet span {
        display: table-cell;
        color: #3174c7;
        cursor: pointer;
        text-align: center;
        width: 3.5%
    }

    div.alphabet span:hover {
        text-decoration: underline;
    }

    div.alphabet span.active {
        color: black;
    }

    div.alphabet span.empty {
        color: red;
    }

    div.alphabetInfo {
        display: block;
        position: absolute;
        background-color: #111;
        border-radius: 3px;
        color: white;
        top: 2em;
        height: 1.8em;
        padding-top: 0.4em;
        text-align: center;
        z-index: 1;
    }
</style>

<div style="margin-top:2%">    
    <table id="example" class="display" width="100%">
        <thead>
            <th>Name</th>
            <th>Email</th>
            <th>Title</th>
        </thead>
    </table>
</div>

</apex:page>

The alert(_alphabetSearch); is not getting called

allan

You can't use the alphabet search with server-side processing. $.fn.dataTable.ext.search is performing client-side search and since you are using server-side processing it has absolutely no effect on the data shown in the table (indeed, as you are seeing - it simply isn't called).

You would need to implement something similar in your server-side script in order for this to work with server-side processing.

Regards,
Allan