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

kprohaszka · June 20

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 · June 20

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 · June 21

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 · June 21

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 · June 21

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 · June 24

@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 · June 24

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:

DataTables core
The alphabetSearch plugin
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 · June 24

@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 · June 24

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

allan · June 24

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 · June 25

@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 · June 25

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 · June 25

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

kprohaszka · June 25

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 · June 25

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 · June 25

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 · June 25

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

DataTables core
Alphabet search plugin
Initialisation code.

Allan

kthorngren · June 25

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 · June 26

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 · June 26

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

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

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

Answers

Howdy, Stranger!

Categories

DataTables

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

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

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables