Non Display of Alphabet Bar

jdadwilson · June 2019

Long time, big user of dataTables! (https://www.msholmes.org) Love the product!! I have 80+ instances of table use. Most are just 1 table on a page no problem. Some have 9000+ records and some just 3-15. Some can have <15 or >1000 depending on the initial search provided via an AJAX call. For those that can vary I wrote a few lines of code that checks the number of returned records against my Min standard of 15. If the returned number is less I hide the Alpha bar and also the Pagination info at the bottom. This works great for single tables on a page.

My latest new feature is to allow a site search that can create multiple tables on a page. Non display of the pagination works but non display the Alphabet string doesn't. The pagination, length, search areas all have unique IDs based on the name of the dataTable. But the Alphabet string ID is just myAlphabet.

Is this something that has been 'changed' in later versions? I'm still on 1.10.11. I tried 1.10.18 but the site blew up. Is there a work-around to the issue? Should I just change the DOM initialization for each to just exclude the items?

TIA for any assistance
jdadwilson

kthorngren · June 2019

I might be missing something but what is the Alpha bar? Is it a builtin Datatable component or something custom?

Do you have an example page we can look at to see what you are doing?

But the Alphabet string ID is just myAlphabet.

Do you have one of these for each table? If so the problem is likely that you have HTML elements with the same ID.

I tried 1.10.18 but the site blew up.

Is this independent of the Alpha bar? or is this what blew up?

Kevin

jdadwilson · June 2019

The alpha bar (as I call it) is the area at the top of a table that has each of the letters of the alphabet that can be selected to filter the table.

It is a built-in dataTable component.

example: https://msholmes.org/cemeteries

kthorngren · June 2019

I see, you are talking about utilizing the idea from the Alphabet Input Search blog. That is not a default Datatables component and is not controlled with dom or other Datatables initialization options. However you could hide the div that it is in with jQuery or other method if the number of rows is less than 15.

Kevin

jdadwilson · June 2019

I think you missed the whole point of my question. Yes, when I have only one table on a page I can definitely hide the 'alpha bar' given that it has a unique ID of 'myAlphabet'. BUT when I have more than one table on a page the 'alpha bar' ID is then not unique and thus cannot be hidden if desired.

Not sure I understand what you mean when you say that the 'Alpha Bar' is not controlled with dataTables initialization options. What then is the purpose of the 'A' in the table dom: assignment? Doesn't this make it a default dataTables component?

p.s. I am not 'talking' about utilizing the idea from the blog. I presently have over 80 usages of a dataTable and each will show or hide the 'alpha bar' depending on the table length.

jdadwilson

tangerine · June 2019

What then is the purpose of the 'A' in the table dom: assignment?

https://datatables.net/reference/option/dom
There is no 'A' in the dom options. What gave you that idea?

kthorngren · June 2019

You are adding the Alpha Bar as a dom plugin here in _site_functions.js:

    // Register a search plug-in
    $.fn.dataTable.ext.feature.push({
        fnInit: function(settings) {
            var search = new $.fn.dataTable.AlphabetSearch(settings);
            return search.node();
        },
        cFeature: 'A'
    });

This allows the use A in the dom option as a plugin. This is explained in the Alpha Input Search - part III blog.

You are creating the Alpha Bar here:

    $.fn.dataTable.AlphabetSearch = function(context) {
        var table = new $.fn.dataTable.Api(context);
        var alphabet = $('<div id="myAlphabet" class="alphabet"/>');

        draw(table, alphabet);

        // Trigger a search
        alphabet.on('click', 'span', function() {
            alphabet.find('.active').removeClass('active');
            $(this).addClass('active');

            table
                .search('')
                .alphabetSearch($(this).data('letter'))
                .draw();
        });

And assigning id="myAlphabet". This is not something Datatables has control of. Based on your solution and code you will need to find a way to make this dynamic.

Kevin

jdadwilson · June 2019

Been so long since I looked at the code I forgot it was there. Thanks.

tangerine · June 2019

This allows the use A in the dom option as a plugin. This is explained in the Alpha Input Search - part III blog.

My apologies. I wasn't aware of that feature.

jdadwilson · June 2019

kthorngren... I replaced Line 91 of the Blog III final code with the following

var thisId = table.tables().nodes().to$().attr('id');
var alphabet = $('<div id="' + thisId + '_alphabet" class="alphabet"/>');

This then adds the table Id to the DOM. BUT... All of the 'letters' get the 'empty' class. Selecting a letter still works but all letters are gray. Any clue as to why? I'm at a loss.

TIA for any assistance.
jdadwilson

kthorngren · June 2019

It looks like you are using a custom CSS file in the example you posted:
jquery.dataTables.myStyles.css

Which has:

div.alphabet span {
  background-color: #2a303c;
  display: table-cell;
  color: #ffffff;
  cursor: pointer;
  text-align: center;
  width: 3.7037%;
  border-left: 2px solid #d2d6df;
  border-right: 2px solid #d2d6df;

Are you using the same for the page you are working on?

It would be hard to say without actually seeing it so we can see what styles are applied.

Kevin

jdadwilson · June 2019

Yes I do have a special css sheet for the tables. The styles work fine. The issue is that all the counts for each letter are zero which then causes the style for the letter to be 'empty'.

kthorngren · June 2019

I copied your Alpha Search code from the example you posted. Replaced the same line with your two lines above and it seems to work. At least the letter counts work and the search functionality. The styling is no the same though.

Here is the example:
http://live.datatables.net/lijecira/1/edit

Without being able to see what you have it would be difficult to say why the counts are 0. Please post a link to your page or update my test case to replicate the issue.

Kevin

jdadwilson · June 2019

Kevin,
Can we take this discussion off-line. My email is... jamesawilson.ca@gmail.com.

Thanks.

kthorngren · June 2019

If you want to provide a private link to your page please PM the developer @allan or @colin

Kevin

jdadwilson · June 2019

For you to see the result, I need to move the test scripts to the live site. Since the change causes ALL of the table to exhibit the same problem I don't want to leave it up any longer than necessary. Thus I would like to coordinate with you on a time frame that the switch could be made and then could change it back.

jdadwilson

colin · June 2019

Hi @jdadwilson ,

Another option would be to update Kevin's example so that it demonstrates the issue - would that be possible to do?

Cheers,

Colin

Non Display of Alphabet Bar

Non Display of Alphabet Bar

Answers

Howdy, Stranger!

Categories

DataTables

Non Display of Alphabet Bar

Non Display of Alphabet Bar

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables