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?
![kprohaszka](https://secure.gravatar.com/avatar/34277086fd5f9b59f84a1ea9a5d7f21f/?default=https%3A%2F%2Fvanillicon.com%2F34277086fd5f9b59f84a1ea9a5d7f21f_200.png&rating=g&size=120)
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!
This question has accepted answers - jump to:
Answers
The Alphabet Search uses this search plugin:
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 at0
. Change the index to the column index you are interested in. For examplesearchData[5]
will use the 6th column for searching.Kevin
With the current plugin you can use:
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:Allan
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!
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
@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?
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.
I don't really understand the question. You need:
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
@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
}
That code goes into your DT initialisation. (table = new DataTable.... etc.)
See Allan's working example.
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:
Allan
@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();
});
Replace the
$(document).ready(function () { $("#directory-table").DataTable(); });
in your last code snippet with what Allan provided to look like this:KEvin
@kthorngren I tried that, but am getting an error "DataTables warning: table id=directory-table - Unknown feature: alphabetSearch"
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.
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?
Kevin
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.
Put the
alphabetSearch
file before yourdatatable-call.js
one. The load order has to be:Allan
Another problem is you are loading datatables.js twice:
Only load it once. Loading datatables.js multiple times can cause issue. Remove one of them.
Kevin
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.
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