Resize and qtip setting issue on tablesorter with scroll widget

[jrmusa]

Hi @Mottie,
Scroll widget is an useful add-on but I have trouble when:
Q1. I wanna resize table with window size so I write:

var newHeight = 400;
 var updateScroller = function (height) {
        $('.tablesorter-scroller-table').css({
            height: '',
            'max-height': newHeight + 'px'
        });
    }

    $(window).bind("resize", function () {
        if (newHeight > $(window).height())
        {
            newHeight = $(window).height() - 100;
        }
        updateScroller(newHeight);
    }).trigger("resize");

$('#lotyieldtable').tablesorter({
        delayInit: true,
        headerTemplate: "",
        widthFixed: false,
        fixedHeight: true,
        showProcessing: true,
        debug: true,
        widgets: ['scroller'],
        ignoreCase: false,
        widgetOptions: {
            scroller_upAfterSort: true,
            scroller_jumpToHeader: true,
            scroller_height: newHeight,
            scroller_fixedColumns: 1,
            scroller_addFixedOverlay: false,
            scroller_barWidth : null,
            stickyHeaders_offset: 50,
        },
        initialized: function () {
            updateScroller(newHeight);
            setTimeout(function () {
                $('#lotyieldtable').trigger('applyWidgetId', 'stickyHeaders');
            }, 2000);
        }
    });

it doesn't work when I resize the window, not sure what's going on, I follow this demo: http://jsfiddle.net/abkNM/4304/

Q2. Everything is alright if I add qtip on tablesorter, however the frozen column would miss something so that my qtip trigger doesn't work after sorting table, I put a class "tooltip2" on frozen column and it can show tip at the begining, afterward it seems like lost class after sorting table.

function set_qtip() {
    $(".tooltip2").on("mouseover", function () {
        var $this = $(this)
        if (!$this.data("toolTipAttached")) {
            $this.qtip({
                style: {
                    widget: false,
                    classes: 'ui-tooltip-light'
                },
                content: $($(this).attr("data-tooltip")).html(),
                position: {
                    corner: {
                        target: 'topRight',
                        tooltip: 'bottomLeft'
                    }
                }
            });
            $this.data("toolTipAttached", true);
            // the qtip handler for the event may not be called since we just added it, so you   
            // may have to trigger it manually the first time.
            $this.trigger("mouseover");
        }
    });
}

Thanks for support!

[Mottie]

Hi @jrmusa!

I'll try to look at this later today. In the mean time, please provide a demo that is using that qTip code.

[Mottie]

For question 1, try this (demo):

$(function() {
  var newHeight = 400;
  var updateScroller = function(height) {
    $('.tablesorter-scroller-table').css({
      height: '',
      'max-height': height + 'px'
    });
  };

  $(window).bind("resizeEnd", function() {
    newHeight = $(window).height() - 100;
    updateScroller(newHeight);
  });

  $('table').tablesorter({
    delayInit: true,
    theme: 'blue',
    headerTemplate: "",
    widthFixed: false,
    fixedHeight: true,
    showProcessing: true,
    // debug: true,
    widgets: ['scroller', 'stickyHeaders'],
    ignoreCase: false,
    widgetOptions: {
      scroller_upAfterSort: true,
      scroller_jumpToHeader: true,
      scroller_height: newHeight,
      scroller_fixedColumns: 1,
      scroller_addFixedOverlay: false,
      scroller_barWidth: null,
      stickyHeaders_offset: 50,
    },
    initialized: function() {
      $(window).trigger("resize");
    }
  });
});

[jrmusa]

Hi @Mottie, I'll try Q1 solution later and Q2 demo is here

[TheSin-]

for the tip stuff, try a delegate bind on them, like

$(table.tablesorter).on("mouseover", ".tooltip2", function () {

or something like that. So when ts rebuilds things, or adds to the table after the init, the binds re apply. I use qTip on my tables as well and that is how I deal with them.

[Mottie]

Actually, because the scroller adds a wrapper around the table, it would be better to bind to the body , so the cloned table parts get a tooltip as well (demo):

$("body").on("mouseover", ".tooltip2", function() {

[jrmusa]

Excellent! I think it works for Q2, let me getting those solution into my page and feedback later.
Really appreciated!

[Mottie]

Also, for question 1, there was already a demo on the home wiki page that adjusts its height

http://jsfiddle.net/Mottie/txLp4xuk/2/ (scroller with dynamic height)

[jrmusa]

@Mottie you're right! I should check wiki first, most of time I search resource on Google :P