jQuery DataTables: Alphabetical Search

Demo

Name Position Office Extn. Start date Salary
Name Position Office Extn. Start date Salary
$(document).ready(function(){
   var table = $('#example').DataTable({
      ajax: '/lab/articles/jquery-datatables-alphabetical-search/arrays.txt',
      dom: 'Alfrtip',
      alphabetSearch: {
         column: 0, 
      }
   });
});

In addition to the above code, the following Javascript library files are loaded for use in this example:

//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
//cdn.datatables.net/t/dt/dt-1.10.11/datatables.min.js
//gyrocode.github.io/jquery-datatables-alphabetSearch/1.1.2/js/dataTables.alphabetSearch.min.js

The following CSS library files are loaded for use in this example to provide the styling of the table:

//cdn.datatables.net/t/dt/dt-1.10.11/datatables.min.css
//gyrocode.github.io/jquery-datatables-alphabetSearch/1.1.2/css/dataTables.alphabetSearch.css

Edit on jsFiddle

Usage

In order to start using the plug-in, you need to include two extra files in addition to jQuery DataTables plugin.

<link type="text/css" href="//gyrocode.github.io/jquery-datatables-alphabetSearch/1.1.2/css/dataTables.alphabetSearch.css" rel="stylesheet" />
<script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-alphabetSearch/1.1.2/js/dataTables.alphabetSearch.min.js"></script>

In your jQuery DataTables initialization code add dom option and include letter A among other characters. Also define alphabetSearch.column option and specify zero-based index of the column to use for alphabetical search.

For example:

var table = $('#example').DataTable({
   dom: 'Alfrtip',
   alphabetSearch: {
      column: 0
   }
});

Localization

Alphabetical search can be translated using language.alphabetSearch.alphabet, language.alphabetSearch.infoDisplay and language.alphabetSearch.infoAll options as shown below.

var table = $('#example').DataTable({
   dom: 'Alfrtip',
   alphabetSearch: {
      column: 0
   },
   language: {
      alphabetSearch: {
         alphabet: '#АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ',
         infoDisplay: 'Показать',
         infoAll: 'Все'
      }
   }
});

Other Examples

Links

View on GitHub

Related posts

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

Leave a Reply

Your email address will not be published.

(Optional)