(function() {

// MAXB.NET LABS

})();

hack, javascript, jquery

jQuery Tablesorter thead fixed

Posted on by Massimiliano Balestrieri | Comments

This is a draft… (IE6-7 css). jQuery è pazzesco!

DEMO

jQuery(function() {
		var height_table = '150px';
        var table_id = "tablesorter-demo";
		var box_id = table_id + '-thfixed';
		var clone_id = table_id + '-clone';
		var target = table_id + '-target';

        var wrapper = '<div class="thfixed" id="'+ box_id +'"><div class="thfixed-head"><div class="thfixed-head-box" id="'+target+'"></div></div><div class="thfixed-body"></div></div>';
        var table = $("#" + table_id);
        var table_parent = table.parent()
        table_parent.empty();
        table_parent.append(wrapper);
        $("#" + box_id + ">.thfixed-body").append(table);

        $("#" + table_id).tablesorter();
        var myclone = $("#" + table_id).clone();

        myclone.attr('id',clone_id);
        //console.log(myclone.attr('id')); 

        $("#" + target).append(myclone);

        //stili wrapper
        $(".thfixed, .thfixed-head").css({"overflow" : "hidden","position":"relative"});
        $(".thfixed-body").css({"overflow" : "auto","position":"relative", "height" : height_table});
        $("#" + clone_id).css({"margin":"0"});
        $("#" + table_id).css({"margin-top":"0"});
        //#console.log($("#" + clone_id));

        //.append('<div class="thfixed-head"><div class="thfixed-head-box">');

        var myhandlers_source = $("#" + table_id + ">thead>tr>th");
        var thead_tr_source = $("#" + table_id + ">thead>tr");
        var td_source = $("#" + table_id + ">tbody>tr>");
        //console.log(td_source);
        var myhandlers_clone = $("#" + clone_id + ">thead>tr>th");
        //console.log(myhandlers_source);
        //console.log(myhandlers_clone);
        myhandlers_clone.each(
            function(nr){
                    //console.log($(this).click);
                    //console.log($(this).css('width'));
                    var width = parseInt($(this).css('width'));
                    $(this).attr('style' , 'width:'+ width + 'px');

                    if(nr == (myhandlers_clone.length - 1))
                        width -= 10;

                    $(td_source.get(nr)).attr('style' , 'width:'+ width + 'px');
                    thead_tr_source.css('display','none');

                    $(this).click(
                        function(){
                            myhandlers_clone.each(function(nr2){
                                if(nr !== nr2){
                                    $(this).removeClass('headerSortDown');
                                    $(this).removeClass('headerSortUp');
                                }
                            });

                            $(myhandlers_source.get(nr)).trigger('click');
                            var classes = $(this).attr('class').split(" ");

                            if(classes[1]){
                                if(classes[1] == 'headerSortDown'){
                                    $(this).removeClass('headerSortDown');
                                    $(this).addClass('headerSortUp');
                                }else if (classes[1] == 'headerSortUp'){
                                    $(this).removeClass('headerSortUp');
                                    $(this).addClass('headerSortDown');
                                }else{
                                    $(this).addClass('headerSortDown');
                                }
                            }
                            //$(this).removeClass('headerSortDown');
                            //$(this).removeClass('headerSortUp');

                            //$(this).css();
                        }
                    );

            }
        );

        $("tbody", myclone).empty();

});
This entry was posted in hack, javascript, jquery and tagged , , , . Bookmark the permalink.