jQuery DataTables: Alphabetical Search

Michael Ryvkin
21 21

jQuery DataTables plugin includes an interesting feature: alphabetical search. However despite its superb functionality it lacks support for search so I decided to improve it while also adding row grouping, number filtering, localization and alternative sorting mechanism.

See example below for demonstration.

For more examples and documentation please visit dedicated jQuery DataTables AlphabetSearch page.

Example

You May Also Like

jQuery DataTables: Row selection using checkboxes and Select extension
jQuery DataTables: Row selection using checkboxes
jQuery DataTables: Why click event handler does not work
jQuery DataTables: How to add a checkbox column
Michael Ryvkin

Freelance web developer based in Perkasie, Bucks County, PA. I design and develop custom websites and web applications, perform website maintenance and provide technical support for small and medium-sized businesses.

Contact me for a free quote or consultation on your project.

Comments

  1. The latest version 1.1.1 does not work right. If the table does not have the ‘A’ in the dom the table fails to load.

    Reply

  2. Thank you for this. I’ve been using it for a few days with a client listing table on my company intranet and have just noticed that the letter ‘W’ doesn’t appear in the alphabet filter, even though I have 3 clients starting with ‘W’. Can you help?

    Reply

      1. Thank you. I did manage to fix it though by adding this to the initialisation

            language: {
         alphabetSearch: {
            alphabet: '#ABCDEFGHIJKLMNOPQRSTUVWXYZ'
         }
    }
        Reply

  6. Michael,
    I enjoy your blog, great job both visually and informational.
    I did apply the CSS, but then the row coloring is off, for some of the rows where is gets removed now appear the same color . I did notice that on DataTables.net his sample does not have it. Just wondering where there is documentation on the various values that you can pass. maybe there is some CSS numbering that applies to the tr.alphabet_group?

    Thanks

    Reply

  8. Michael,
    Thanks for your help. The issue was how I was applying the CSS to get the rows to alternate colors by using a pseudo class rather than the using the generated odd even classes DUD!!!

    Reply

  10. Hi,
    I share my datable code between multiple data source an pages an in some case the Alphabet filtering feature is not needed.
    is there a simple way/option to disable completely the plugin while keeping all its source files loaded?

    Now if I simply remove the A letter from dom DataTable option the error is:

    TypeError: undefined is not an object (evaluating 'context.alphabetSearch.letterSearch')

    It will be useful a simple init option inside alphabetSearch: {}

    Reply

      1. Now works perfectly by simply removing (conditionally) the A Dom option.
        less than 20 minutes of reaction time for a free software is definitely what we can really call “software support”.
        Please, accept the small donation that I’ve just send to you and keep up the good work.
        Thank you again.

        Reply

          1. Some small suggestions:
            – you should check if the infoDisplay variable is not empty before adding “:” (this will allow to set the value to an empty string in order to remove completely the label). Another alternative solution could be to remove completely the “:” separator leaving it inside the variable value
            – by clicking the “All” option the data are still grouped by letters and choosing the sort column affect only the grouped rows. In some cases could be very useful to have an extra clickable option (like “Off”) with the effect to activate/deactivate on the fly the alphabet input behavior.

            Reply

            1. Pier, those are excellent suggestions. I will consider adding them in the next update. Regarding #2, I may add API methed to enable/disable the feature since I assume not everyone would want to have On/Off switch for the alphabet search. I could be wrong though.

              Reply

              1. Regarding #2 you could add an init options (like onOffSwitch: true|false) that will add the link before the infoAll item. Just an idea.

                Reply

              1. Ok, one last improvements.
                The script look for the first char into the cell of the indexed column in order to match the alphabet letter. This is OK for plain text content, but if the cell contains even a simple link that wrap the text (imagine the link to edit that row of data) the picked char is the “<" of the anchor tag and the alphabet filter stop working well (all rows are grouped under the "<" char). I think that it could be better to pick the first "displayed" char of the cell.

                Reply

                1. That seems like unnecessary complication. jQuery DataTables already have the tools to correct the problem you’re describing. The solution is to use plain-text values in the returned data or table cells and produce HTML markup using columns.render option.

                  Reply

  11. Hi Team,

    I created HTML table dynamically using javascript, and then called the function for alphabet search. Sort and searcg works fine, but for the alphabet search (when clicked on the alphabets) I am getting the below error:

    Unable to get property ‘Api’ of undefined or null reference

    Reply

      1. I saved the page and see two versions of jquery.min being saved 1.11.0 and 2.1.3. If can provide the URL of the website if required. Can two versions of jquery be an issue.

        Reply

      2. Hi Michael,

        Thanks for all the info, it was multiple versions of jquery causing issue, fixed by referring only the latest jquery file.

        Reply

    1. I recently used this control, the div containing alphabets renders via jquery file. Instead of changing the jquery, can you explore to achieve this via CSS change. Post page render, alphabet section is a simple div you can alter the DOM later as per your requirements.

      This is just a suggestion, as modifying the jquery itself might result in various exceptions.

      Reply

  14. Currently while clicking on alphabetSearch displaying particular records, onClick of a particular alphabet it should navigate to letter places. Is this possible?

    Thanks

    Reply

  15. Hello Michael

    Thanks for the demo ,
    I have used it in my project and its working

    But i have one issue when i use alphabet search with pagination at that time pagination is not working
    When i click on all record only that time pagination working

    If you have any solutions please help us

    Reply

      1. Thank you so much for pushing the update so quickly. We have not yet had a chance to test but will do so soon. We really appreciate your willingness to share this plugin.

        Reply

  18. Hi – working to add this neat functionality to a data tables implementation where the alpha sort applies to column 2. Interestingly, when I click on “All” and then attempt to sort one of the columns, it maintains the starting sort on column 2’s first letter and then will apply a secondary sort on the clicked column… for example:

    Studio–Movie–Year
    Marvel–Avengers–2012
    Marvel–Black Panther–2018
    Marvel–Captain America The First Avenger–2011
    Marvel–Captain America Civil War–2016
    Marvel–Thor Ragnarok–2017

    If alphabetSearch is pointed to the movie name and I attempt to reverse sort on year, the only change is to flip the two Captain America lines… Ideally I’d like the alphabetSearch index to follow the current sort, but I cant see how to do this. Thoughts?

    Reply

  19. To implement buttons (PDF, COPY, EXCEL) + the alphabet selection, get 2 search input, do you know how to change it?

    I used dom: ‘A’ “iflp > B <" bottom "iflp > ‘,

    But but two repeating buttons appear

    Reply

  20. Hi. just tried to use the script and i am getting a console error: Cannot read property ‘fn’ of undefined
    As a result the table is not loading the alphabetical index.
    Any ideas

    Reply

Leave a Reply

(optional)

This site uses Akismet to reduce spam. Learn how your comment data is processed.