jQuery DataTables: Alphabetical Search

See example below for demonstration. Please visit dedicated jQuery DataTables AlphabetSearch page for more examples and documentation.

Example

Recommended For You

Books

Online Courses

You Might Also Like

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.

  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?

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

            language: {
                 alphabetSearch: {
                    alphabet: '#ABCDEFGHIJKLMNOPQRSTUVWXYZ'
                 }
            }
        
  3. 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

  4. 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!!!

  5. 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: {}

      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.

          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.

            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.

              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.

              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.

                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.

  6. 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

      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.

      2. Hi Michael,

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

    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.

Leave a Reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.
(Optional)