alphabetSearch Issues

jdadwilson

On a particular page of my website I have 7 tables coded within a single grid element. Six of the tables need to fill the whole grid element so the width for each is 100%. One table only has 1 column so I set the width to 50%. This works great for the table but the alphabetSearch bar is still 100%.

1. How do I set the alphabetSearch bar to be less than 100%.

2. How can I prohibit the alphabetSearch bar to not display.

More detail about #2... For all of my tables I have a global default routine that sets the layout as follows...

layout: {
    top2:   'alphabetSearch',
    top1:   'paging',
    bottom: 'info'
},

Thus, how can I set the layout for the table in the js code so that the alphabetSearch does not display. I tried

top2: '',
top2: false, and
top2: null

but all three causes an error.

Here is a link to the test case.

I have the js code commented out so you can see the issue with problem 1.

TIA for your assistance
jdadwilson

allan

1) With a little CSS:

div.alphabet {
  width: 50%;
}

2) top2: null should do I think. Can you update the example to demonstrate this issue please?

Thanks,
Allan

kthorngren

How do I set the alphabetSearch bar to be less than 100%.

I inspected the alphabetSearch div element and it has this CSS:

div.alphabet {
    font-family: "Roboto Mono", Verdana, "sans-serif";
    font-size: var(--table-font-size);
    line-height: 20px;
    display: table;
    width: 100%;
    margin: 0;
}

I think you can override the CSS with this in the style section of that page:

div.alphabet {
    width: 50%;
}

Let us know if it works.

How can I prohibit the alphabetSearch bar to not display.

I'm not sure where your Datatables init code is at but I suspect the problem is you are not overriding the default layout setting. In that particular Datatable you will need to override the full layout option, something like this:

layout: {
    top1:   'paging',
    bottom: 'info'
},

Nothing is merged between the default settings and what is in the individual Datatable init code. The Datatable. init options will override the full option in the default settings.

Kevin

jdadwilson

It seems that the default and the local do merge. I changed the local to...

layout: {
    top1:   'paging',
    bottom: 'info'
},

and the alphabetSearch bar still showed, and with no error.

I then added...

top2: null,

to the local. The alphabetSearch bar did not show but the error did.

Here is the link to the test case.

jdadwilson

jdadwilson

Using the following...

div.alphabet {
    width: 50%;
}

approach would not work as that would change all of the width of all alphabetSearch bars throughout the site.

What I need is a js snippet that would only change the width as desired.

document.getElementById will not work since the div doesn't have an id just the class.

I've searched for how to change the width value of a class but didn't find anything.

jdadwilson

kthorngren

It seems that the default and the local do merge.

That maybe the case now. IIRC there was a thread awhile back discussing this and Allan may have changed something.

The alphabetSearch bar did not show but the error did.

I might be missing something but how do I see the error? What is the error? Which table are you trying to remove the alphabetSearch bar from?

approach would not work as that would change all of the width of all alphabetSearch bars throughout the site.

Inspecting your page the alphabetSearch bar is in the div with the id of table_Links_wrapper. Adjust the selector to find that div first then find the alphabetSearch bar. Maybe this will work:

div#table_Links_wrapper  div.alphabet {
    width: 50%;
}

Kevin

jdadwilson

The table comes from the 'Article Links' button to the right. The table is not displayed because of the local layout...

layout: {
    top2:   null,
    top1:   'paging',
    bottom: 'info'
},

The error shows on the inspect -> console panel.

Uncaught TypeError: Cannot read properties of undefined (reading 'empty')
    at draw (alphabetSearch-2.x.js:141:14)
    at _Api.<anonymous> (alphabetSearch-2.x.js:81:9)
    at _Api.iterator (vendor-datatables-2.0.8.js:6756:15)
    at _Api.<anonymous> (alphabetSearch-2.x.js:80:10)
    at Function.recalc (vendor-datatables-2.0.8.js:6876:17)
    at hide_alphaLetters (_hide_alphaLetters.js:30:32)
    at jQuery.fn.init.initComplete (Grayson-datatables-globals.js:50:29)
    at vendor-datatables-2.0.8.js:6346:16
    at Array.map (<anonymous>)
    at _fnCallbackFire (vendor-datatables-2.0.8.js:6345:50)

I really don't want to remove it, I just want the width to adjust to the width of the table.

jdadwilson

kthorngren

Sorry, I had to clear the browser's cache.

If you follow the traceback you will see you defaults has this, referred to on line 8 of the traceback:

initComplete: function() { hide_alphaLetters( this.api() ) },

Which is executing thisApi.alphabetSearch.recalc(); in this code:

    } else {
        thisApi.alphabetSearch.recalc();
        $('#div.alphabet',  thisApi.table().container() ).show();
        $('#div.dt-full',   thisApi.table().container() ).show();
    }

Ultimately getting to line 2:

function draw(table, alphabet, options) {
    alphabet.empty();
    //alphabet.append('Search: ');

The problem is you don't have alphabetSearch enabled for this Datatable. One suggestion is to override the defaults with an empty initComplete for this Datatable, for example:

    initComplete: function () {}

Or possibly better is to add this if statement in hide_alphaLetters() to see if the container exists:

    } else if ( $('#div.alphabet',  thisApi.table().container() ).length ) {
        thisApi.alphabetSearch.recalc();
        $('#div.alphabet',  thisApi.table().container() ).show();
        $('#div.dt-full',   thisApi.table().container() ).show();
    }

Kevin