ansaurus

Question

Fixed position table header relative to parent scrolling DIV element

Answer 1

A:

Because of my dependencies on other plugins: jScrollPane, Tablesorter etc it was hard to find an ideal plugin solution to my issue.

So i wrote some code myself :)

It's not complete but the crux of it is as follows:

$(function() {

    var $headLength = $("#quotations thead th").length;

    $("#quotations thead th").each(function(index) {
        $thisWidth = $(this).attr("width");
        //console.log($thisWidth);
        $("#quotations tbody tr:first td:eq(" + index + ")").attr("width", $thisWidth)
    });

    var $clonedHead = $("#quotations thead")
    .clone()
    .insertBefore(".w_price_assess .jScrollPaneContainer")
    .wrap('<table id="quotations_clone" />');

    $("#quotations thead").hide();

    $(".w_price_assess").delegate("#quotations_clone thead th", "click", function() {

        var $this = $(this);
        var $thIndex = $this.index("#quotations_clone thead th");

        $("#quotations thead th:eq(" + $thIndex + ")").trigger("click");

    });

    $(".w_price_assess table.pricing").tablesorter({
        // change the multi sort key from the default shift to alt button 
        sortMultiSortKey: 'shiftKey'
    });

    // re-apply zebra striping after sort
    $(".w_price_assess table.pricing").bind("sortEnd", function() {
        $("table.striped .odd").removeClass("odd");
        $("table.striped tbody tr:nth-child(odd)").addClass("odd");
    });

});

So i am cloning the thead of the table i want and then re-inserting it above the actual table.

Tablesorter is still active by checking which th element of the new the new thead is clicked and then using jQuery's fabulous trigger method to trigger a click on the associated th in the hidden table head.

RyanP13 2010-10-14 08:29:02

ansaurus

tags:

views:

answers:

Fixed position table header relative to parent scrolling DIV element

related questions