Alphabet Search works only on first column and needs to start with Upper case letter

MadBoyEvo

Link to test case:

https://jsfiddle.net/MadBoy/3g91xpLf/1/

Description of problem:

I've implemented AlphabetSearch and it seems to:
1. only find letters from the first column - is there a way to define which column to take into consideration?
2. While it detects all 1st letters properly, it fails to search if the letter is lowercase - any way around it? Is it a bug?

kthorngren

The Alphabet Search code is explained in this blog. You can update the code to perform the search on any column or columns you like and change it to be case insensitive. From the blog the code has this search plugin:

// 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;
} );

The searchData[0] in the if statement is pointing to column 0. You can change this to whatever column index you want. You can use something like toUpperCase() to make the case the same for the comparison. For example if you want to have a case insensitive search for the third column (index 2) use something like this:

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

Kevin

MadBoyEvo

Ok, I was under impression that this is sort of maintained by DataTables - If I have to edit the code it means I can't use the CDN from you. While I can do this, is there a chance this would be fixed/configurable in the plugin itself?

allan

We do indeed maintain it, although it isn't a "first class" extension in the way Buttons and others are - so it doesn't see regular maintenance.

That said, I'd be very happy to see it be given some attention! The source is here and the specific line that needs to be changed for the column is here. I'd be happy to take a PR if you want to make it configurable via a variable such as $.fn.dataTable.AlphabetSearch.column.

Allan

MadBoyEvo

Here's the PR -> https://github.com/DataTables/Plugins/pull/513

By default

• is case insensitive (it used to show only upper case letters

Additionally

• can configure which column to use for search $.fn.dataTable.AlphabetSearch.column = 5;
• can enable case sensitivity $.fn.dataTable.AlphabetSearch.caseSensitive = true;which doesn't just enable the old way, but also adds lowercase letters of the alphabet to the search
• can enable numbers to be added as part of the search $.fn.dataTable.AlphabetSearch.addNumbers
  Adding more letters/numbers required removal of width 3,5% and it works in my case but maybe that is required? Sorry for the spaces, as that's my VSCode configuration.

Here's how it works: https://jsfiddle.net/MadBoy/rsvn5L7j/3/

I am total noob in JS so the code may be not so special.

allan

Awesome - thank you very much!

Just for information (not a complaint, but for future reference) - regarding the spaces / tabs, we normally reject such a PR since it destroys the git history for a file making it really hard to git blame, VSCode can be set to auto detect the file’s white space formatting, which is what I’d normally recommend using.

Allan

MadBoyEvo

I've committed another PR -> https://github.com/DataTables/Plugins/pull/514

This one removes the ability to set via

$.fn.dataTable.AlphabetSearch.column = 5;
$.fn.dataTable.AlphabetSearch.caseSensitive = true;
$.fn.dataTable.AlphabetSearch.addNumbers = true;

In favor of

alphabet: {
    column: 3,
    caseSensitive: true,
    numbers: true,
},

I believe it's nicer and easier to use.

This time tabs instead of spaces (changed VSCode settings to autodetect - sorry again).

colin

Very nice, thanks for posting,

Colin