onRenderHeader not applied to sticky headers

[dmgerdes]

I use onRenderHeader to add eventhandlers to custom icons in the header so that I can prevent the header from sorting if I click inside of a header. However it looks like that when sticky headers are applied the onRenderHeader object is not copied to the stickyheaders table. I have to add the following code at the end to mimic the same functionality i get when my page is scrolled to the top.

        var $t,
        c = {
            onRenderHeader: function (index) {
                //launch search for anes - ensure images do not sort column
                var $this = $(this);
                $this.find('SPAN.usergroup-add')
                    .mouseup(function () {
                        Log4.trace("mouseup");
                        //window.open($(this).attr("data-link"));
                        var targetID, paramAry = [];
                        if (updatePriv) {
                            targetID = $(this).attr("id");
                            if (targetID !== "" && targetID !== undefined) {
                                paramAry = targetID.split("-");
                            }
                            prsnlSearch(paramAry[0], paramAry[1]);
                        }
                        return false;
                    });
            }
        };

        //apply onRenderHeader to sticky headers
        $("#surgAnesListTbl-sticky").find("TH").each(function (index) {
            $t = $(this);
            if (c.onRenderHeader) { c.onRenderHeader.apply($t, [index]); }
        });

[TheSin-]

I am not familiar with onRenderHeaders, could you post how you apply it to the normal headers? And in which order you apply things? aka ts then onRenderHeaders or the other way?

[dmgerdes]

It's first applied when initializing tablesorter for my table and it works great until I scroll with stickyheaders. I noticed when my tables got longer with sticky headers that anything I modified in there wasn't applied. That's why I added the workaround above where I apply the code for onRenderHeader to the sticky headers. I found the following post on stackoverflow that outlined what I'm doing awhile ago. Basically I wanted to stop sorting and customize events within the headers. It looks like bindEvents is applied in the jquery.tablesorter.widgets.js but onRenderHeaders was not applied.

http://stackoverflow.com/questions/11117662/jquery-table-sorter-stop-sorting

$("#" + tableId).tablesorter(
    theme: "jui",
    headerTemplate: '{content} {icon}', // needed to add icon for jui theme
    showProcessing: false,
    widgets: widgetsAry,
    widgetOptions: {
        stickyHeaders: "tablesorter-stickyHeader",
        filter_external: '#inpFilterColumnSearch',
        filter_columnFilters: false,
        filter_saveFilters: false,
        scroller_jumpToHeader: false
    },
    onRenderHeader: function (index) {
        var $this = $(this);
        $this.find('SPAN.usergroup-add')
            .mouseup(function () {
                var targetID, paramAry = [];
                if (updatePriv) {
                    targetID = $(this).attr("id");
                    if (targetID !== "" && targetID !== undefined) {
                        paramAry = targetID.split("-");
                    }
                    prsnlSearch(paramAry[0], paramAry[1]);
                }
                return false;
            });
    });

[Mottie]

Hi @dmgerdes!

Yeah, this is a difficult call... the stickyHeaders widget is initialized after the table headers have rendered. The stickyHeaders widget clones the HTML but not the events associated with the header, but it does bind same sorting functions to the sticky header as those applied to the original header.

The problem is that the onRenderHeader function can contain anything. So if you make this function add a span or div to the header cell, or wrap all contents. This change in the HTML has already been cloned into the sticky header, just not event bindings. So if the onRenderHeader function is called a second time on the sticky header, there may be problems with the HTML, but it would allow any binding within that function to occur. I hope that is clear.

So as I see it, there are three solutions:

1. Modify the stickyHeaders widget to use the onRenderHeader function and apply any bindings, and possible duplicate some HTML.... hmm, unless instead of cloning the header, the stickyHeader widget gets the HTML from the table.config.headerContent variable, then applies the template & rendering....
2. Use the stickyHeaders initialized event to apply your event bindings.
3. Use the css sticky headers widget.

---

I think I will modify the stickyHeaders widget to work as stated in the first solution; but I probably won't be able to get around to coding it for a while.

[Mottie]

The stickyHeaders widget now uses the onRenderHeader function while cloning the header (ref 3e42e8b)