Alphabet input search

speedzeta

I have the problem with implementation the "Alphabet input search".

1. I follow all steps described in this http://www.datatables.net/blog/2014-08-26
   but the problem persist. Is impossible display the alphabet input. At the moment copy/paste that code like as it show in the following image, probably exist a "noise" between my code and code which was previously.

https://www.dropbox.com/s/6668ttefc4m7lln/reporte1.png?dl=0

1. I didn´t had problem with insert code css:

https://www.dropbox.com/s/8phet6us82fq31r/reporte2.png?dl=0

My doubt: is possible give the solution?

allan

Can you link to the page you are working on and that shows the problem so it can be debugged please.

Allan

speedzeta

Original website:

a1) http://www.inta.cl/funcionarios/funcionarios-INTA/INTA/

a2) Files original website:

https://www.dropbox.com/sh/17e3lu5vpoujzbr/AAAtoXGUo9v-dmyXt8DzIGZIa?dl=0

Website modified with system alphabet input search:

b1) http://www.inta.cl/alphabet-input-search/funcionarios-INTA/INTA/

b2) Files modified system alphabet input search:

https://www.dropbox.com/sh/kb3v7cnnjtlpl6f/AAARRYlHqKvVVjZWqcmmO2K6a?dl=0

allan

If you look at the console in your browser you would see:

Uncaught SyntaxError: Unexpected identifier jquery.dataTables.js:13489
Uncaught TypeError: undefined is not a function (index):22

For some reason the alphabet search file has been inserted part why through the DataTables source file. I don't know why that has been done, but it is causing a syntax error.

Allan

speedzeta

Probably the conflict or syntax error was produced why i put directly this code in this file .js: https://www.dropbox.com/s/fro6i7d2ydzrm5b/jquery.dataTables.js?dl=0

var _alphabetSearch = '';
 
$.fn.dataTable.ext.search.push( function ( settings, searchData ) {
    if ( ! _alphabetSearch ) {
        return true;
    }
 
    if ( searchData[0].charAt(0) === _alphabetSearch ) {
        return true;
    }
 
    return false;
} );
 
 
$(document).ready(function() {
    var table = $('#example').DataTable();
 
    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();
    } );
} );