Zeigen Sie die Taste am Tisch unten, auch wenn das Fenster sehr klein ist

Question

Ich habe eine Tabelle Sortierer HTML-Seite, die Probe ist here.

$('table').tablesorter({ 
    theme: 'blue', 
    widgets: ['zebra', 'scroller'], 
    widgetOptions: { 
     scroller_height: 400 
    } 
}); 

Wie kann ich die untere Schaltfläche sichtbar, auch, wenn die Fensterhöhe sehr klein ist (sagen wir, nur ein oder zwei Zeilen zeigen können)? Idealerweise ist scroller_height ein Typ wie $ (window) .height()/2 und kann automatisch aktualisiert werden, wenn das Fenster in der Größe verändert wird. Es wird erwartet, dass selbst bei einem kleinen Fenster die untere Schaltfläche auf dem Bildschirm ohne Scroll-Aktion angezeigt wird.

Answer 1

Wenn Sie das Stellrad Fenster dynamisch anpassen seine Höhe machen wollen, gibt es zwei Demos auf dem main wiki page unter Widgets> Auswahlrad.

• http://jsfiddle.net/Mottie/txLp4xuk/2/
• http://jsfiddle.net/Mottie/abkNM/8037/

Im Grunde alles, was Sie tun müssen, ist die äußere Scroll-Fensterhöhe

$('.tablesorter-scroller-table').css({ 
    height: '', 
    'max-height': height + 'px' 
}); 

Here is the demo you shared aktualisiert, anpassen und hat ein Minimum zu 100px gesetzt Höhe.

Answer 2

würde ich sagen, dass es ein paar Möglichkeiten, zu erreichen, was Sie wollen, und eine einfache Möglichkeit ist:

1. eine Funktion erstellen, die die Sichtbarkeit der Tabelle gegenüber dem Ansichtsfenster überprüft;

-Code unten:

function checkVisible() { 
    var bottom_of_table = $("#mytable").offset().top + $("#mytable").outerHeight(); 
    var bottom_of_screen = $(window).scrollTop() + $(window).height(); 
     if(bottom_of_screen > bottom_of_table){ 
      $("#buttons-container").removeClass('bottom-fixed');   
     } 
     else { 
      $("#buttons-container").addClass('bottom-fixed'); 
     } 
    } 

2. Wenn das Ansichtsfenster überschreitet, eine CSS-Klasse, um Ihre Schaltflächen Container hinzufügen, die es auf den unteren Rand des Bildschirms fixiert. Andernfalls entfernen Sie diese Klasse und zeigen Sie den Schaltflächencontainer normalerweise am unteren Rand der Tabelle an.

Sie würden wollen, dass diese Funktion überprüfen last- und Fenster Resize laufen, wie folgt:

$(document).ready(function() { 
    checkVisible(); 
    $(window).on('resize', checkVisible); 
}); 

Ich habe deine Geige aktualisiert: http://jsfiddle.net/12nt19vg/12/show/

Versuchen Sie die Größe des Fensters und lassen Sie mich wissen, ob dies das gewünschte Verhalten ist.

BEARBEITEN: Mit Ihrer zusätzlichen Spezifikation in den Kommentaren habe ich ein äußeres div zu Ihrem buttons container hinzugefügt und Ihr CSS geändert, um visuell den Effekt zu erzeugen, den Sie suchen.

Bitte nehmen Sie sich einen Blick auf diese Geige: http://jsfiddle.net/12nt19vg/27/show/