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'
                 }
            }
        

Leave a Reply

Your email address will not be published.

(Optional)