Hide layout: top2 line

jdadwilson

I have a table with this layout structure...

layout: {
    top3:   'alphabetSearch',
    top2:   'paging',
    topStart:   { pageLength: {menu: [ 10, 20, 30 ] } },
    topEnd: 'search',
    bottom: 'info'
},

Basically this works fine. BUT, when a letter selected from the alphabetSearch bar that has less records than the value of pageLength then I do not want to display the dt-paging information. Five inactive buttons looks kinda weird.

To hide the paging line I use this in the drawCallback area...

$('div.dt-paging').hide();

The problem is that the top2 line and the topStart/topEnd items also disappear.

What code do I need that will not display the paging information.

Removing both lines (top2 & topStart/topEnd) would be OK if I could also clear the search field. The alphabetSearch 'All' button works a little different from 1.0 to 2.0. In 1.0 selecting the All button clears the search field and again displays all of the records. In 2.0 the All button does not clear the search field.

I will admit that I could have added some code somewhere some 8+ years ago to clear the search box. I looked back through my old discussions and found the question posted in 2016 but the discussion was closed and thus no answer shows.

jdadwilson

p.s., Non display of the pagination buttons when the number of records is less than the pageLength value should be a 2.x feature that could be set to true/false.

jdadwilson

p.s.s. I don't know what I did but the removal of the dt-paging line now functions as needed.

BUT, I would still like to know how to clear the search box on initialization and when the All button is selected.

jdadwilson

kthorngren

The alphabetSearch 'All' button works a little different from 1.0 to 2.0. In 1.0 selecting the All button clears the search field and again displays all of the records. In 2.0 the All button does not clear the search field.

That must be some extra code you have from the 1.0 environment. The search input isn't cleared in this example using 1.13.11 and 1.0 version alphabet search:
https://live.datatables.net/socirone/8/edit

Same behavior with 2.0.8 and the later version of alphabet search:
https://live.datatables.net/mutabape/1/edit

With the layout configuration you posted you should see duplicated info and paging elements below the table. See the default settings. Remove the default s you don't want. I built a simple test case to show this plus to show $('div.dt-paging').hide(); only removes the paging element above the table:
https://live.datatables.net/yutizulu/1/edit

You might have something else removing the topStart pagelength and topEnd search elements.

Kevin

jdadwilson

I think I fixed the problem. I compared a v1.0 script with a v2.0 script. In this c2.0 code...

DataTable.AlphabetSearch = function (context) {
    var table = new DataTable.Api(context);
    var alphabet = $('<div class="alphabet"/>');
    var options = $.extend({
        column: 0,
        caseSensitive: false,
        numbers: false,
    }, table.init().alphabet);
    draw(table, alphabet, options);
    context._alphabet = alphabet;
    context._alphabetOptions = options;
    // Trigger a search
    alphabet.on('click', 'span', function () {
        alphabet.find('.active').removeClass('active');
        $(this).addClass('active');
        // Added .search('') below
        table.search('').alphabetSearch($(this).data('letter')).draw();
    });

I added the .search('') on the line indicated. Now any alphabetSearch letter will redraw with an empty search box.

Not sure if this was originally in v1.0 or I added it based on the response to my 2016 post. If this was in v1.0 why was it left out of v2.0? Oversight?

jdadwilson

allan

Oversight?

No. The search used by the AlphabetSearch is orthogonal to the global search. A user can use both of them at the same time.

Indeed, that line isn't present in the old versions, so it looks like something that was added.

Good to hear you've got it working as you need now though.

Allan