How can I include an alphabet search bar in my table code so it links to a specific column?

kprohaszka

I am making a staff directory using data tables, and I want to include an alphabet search bar above the listings so people can either type in their search or click on a letter to display listings by that last name.

I have the basic datatables working normally, and I found this post detailing how to make an alphabet search bar, for which code I have added to the bottom of my datatables.js file.

Currently, the alphabet bar displays across like I want, but the problem I am having is the alphabet bar doesn't actually link to a column/letter, and I am not savvy enough in coding yet to know what additional steps I need to take to get the alphabet bar code to work with the existing datatables format.

So far I've updated the id of the alphabet code to match my table id, but I'm not sure what else I need to change. Any pointers or suggestions would be helpful!

kthorngren

The Alphabet Search uses this search plugin:

var _alphabetSearch;
 
$.fn.dataTable.ext.search.push( function ( settings, searchData ) {
    if ( ! _alphabetSearch ) { // No search term - all results shown
        return true;
    }
 
    if ( searchData[0].charAt(0) === _alphabetSearch ) {
        return true;
    }
 
    return false;
} );

The searchData parameter contains the data from one row in an array that represents each column. You can use the browser's debugger or console.log statements in side the function if you want to see this.

searchData[0] in line 8 is accessing the first column of data. The indexes start counting at 0. Change the index to the column index you are interested in. For example searchData[5]will use the 6th column for searching.

Kevin

allan

With the current plugin you can use:

alphabet: {
  column: 5
}

To tell it what column to use. This is the full TS interface for the alphabet object that you can apply to the DataTables configuration object:

interface AlphabetSearchOptions {
    column?: number;
    caseSensitive?: boolean;
    numbers?: boolean;
};

Allan

kprohaszka

Thanks @allan and @kthorngren for replying! I have a follow-up question: how do I actually implement the plugin? I have the datatables.js file, and datatables.min.js. And for the CMS I'm using, I have a format coded in Velocity that generates my table/HTML code. My confusion is on where I actually add in or call the plugin code. TYIA!

allan

Here is a working example.

You need to be able to add the JS and CSS files for the Alphabet Search plugin. I don't know how you would do that in Velocity. If you aren't sure, you'll need to ask the developers of that CMS.

Allan

kprohaszka

@allan thanks for the working code, that is helpful. I am the developer for our CMS, but I am a new one and unfortunately do not have anyone to assist. My only question is whether I add the js code to the datatables.js file I have, or if I should create a secondary one and link the table html page to that in order to get the datatables to display.
Alternatively, would it be better to link to the datatables CDN instead of having an offline file?

allan

Alternatively, would it be better to link to the datatables CDN instead of having an offline file?

That's your call. CDNs have some benefits such has you not needing to pay for the hosting and the file is simply there, but you may want to rely on your own hosting rather than mine.

My only question is whether I add the js code to the datatables.js file I have, or if I should create a secondary one and link the table html page to that in order to get the datatables to display.

I don't really understand the question. You need:

1. DataTables core
2. The alphabetSearch plugin
3. Initialisation code

It is up to you how you organise that. You could bundle them all into one file, but if it were me, I'd probably have the vendor supplied files as is (i.e. DataTables and AlphabetSearch - just leave them as is), and then create your own JS file that does the initialisation. That makes upgrading easier, since you just change the vendor files.

Allan

kprohaszka

@allan I think I'm almost there. I have a js file for datatables.js, which I believe is the core, I added the js file for the alphabet search plugin, and I have a datatable call js file.

The code to modify the plugin so it works that you shared above*, this gets added to the core datatables js file? Or is it added to the alphabet search js file?

*this code here
alphabet: { column: 5 }

tangerine

That code goes into your DT initialisation. (table = new DataTable.... etc.)
See Allan's working example.

allan

The code to modify the plugin so it works that you shared above*, this gets added to the core datatables js file?

No - that is the initialisation of the DataTable.

If you aren't sure, then I would suggest not modifying the library files.

Have the initialisation in a separate file:

var table = new DataTable('#example', {
  layout: {
    top: 'alphabetSearch'
  },
  alphabet: {
    column: 1
  }
});

Allan

kprohaszka

@allan Interesting, thanks! I don't think I have a proper initialization file, I have this code in a separate file and it seems to work okay. Would I just add what you have above to it?
$(document).ready(function () { $("#directory-table").DataTable(); });

kthorngren

Replace the $(document).ready(function () { $("#directory-table").DataTable(); }); in your last code snippet with what Allan provided to look like this:

$(document).ready(function () { 
  var table = new DataTable('#directory-table', {
    layout: {
      top: 'alphabetSearch'
    },
    alphabet: {
      column: 1
    }
  });
});

KEvin

kprohaszka

@kthorngren I tried that, but am getting an error "DataTables warning: table id=directory-table - Unknown feature: alphabetSearch"

kprohaszka

It's giving an additional error "DataTables warning: table id=directory-table - Cannot reinitialise DataTable. For more information about this error, please see https://datatables.net/tn/3".

I have the js files linked for the alphabet search plugin, dataTables, and datatables.min files, as well as the revised datatable call file. I'll try to do some digging though to see if I missed something in another area.

kthorngren

That suggests you aren't loading the alphabet search plugin correctly. It needs to follow after loading datatables.js. See the HTML tab of Allan's example:
https://live.datatables.net/papusifo/2/edit

Are you loading these two files?

    <link href="//cdn.datatables.net/plug-ins/2.0.8/features/alphabetSearch/dataTables.alphabetSearch.css" rel="stylesheet" type="text/css" />
    <script src="//cdn.datatables.net/plug-ins/2.0.8/features/alphabetSearch/dataTables.alphabetSearch.js"></script>

Kevin

kprohaszka

These are the files in the order being loaded for js:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="/_files/js/datatables.js"></script> <script src="/_files/js/datatables.min.js"></script> <script src="/_files/js/datatable-call.js"></script> <script src="//cdn.datatables.net/plug-ins/2.0.8/features/alphabetSearch/dataTables.alphabetSearch.js"></script>

And I have the css script linked as well. The datatable-call file is identical to what was shared above. The other two datatables files are downloaded directly from the site. I have also checked that the table being generated is properly formatted with thead/tbody tags where appropriate.

The datatable code works with what I originally had, but it does not like the additional code that's been added.

allan

Put the alphabetSearch file before your datatable-call.js one. The load order has to be:

1. DataTables core
2. Alphabet search plugin
3. Initialisation code.

Allan

kthorngren

Another problem is you are loading datatables.js twice:

<script src="/_files/js/datatables.js"></script>
<script src="/_files/js/datatables.min.js"></script>

Only load it once. Loading datatables.js multiple times can cause issue. Remove one of them.

Kevin

kprohaszka

Thanks both, I have made those changes but am still getting the same errors. I will look into it more today and follow-up if I have any more questions. Thanks again for all your help.

allan

If you link to the page you are working on we can take a look. Unfortunately, having shown a working example, we'd need a test case to debug to be able to say what is wrong with it.

Allan