Scroller widget

[MentorEdit]

Can I make sticky headers , to act like how it works in excel. That is , thead should get fixed to the table only , so when you scroll the page , rows inside the table move with thead fixed. All other components on the web page do not move. Please let me know if this is possible.

Thanks, Swathi

[MentorEdit]

I want the sticky header to stick to the table instead of window top , any idea on how I can achieve this.

Thanks

[Mottie]

Hi @swathikuchi!

Do you mean like the scroller widget?

[MentorEdit]

Oh ya this is what I was looking for . Thank you so much . I have the following version and I think this does not have scroller . I will try adding this widget and see how it works . Thanks once again.

/*! tableSorter 2.15+ widgets - updated 3/18/2014 (v2.15.11)
 *
 * Column Styles
 * Column Filters
 * Column Resizing
 * Sticky Header
 * UI Theme (generalized)
 * Save Sort
 * [ "columns", "filter", "resizable", "stickyHeaders", "uitheme", "saveSort" ]
 */
/*jshint browser:true, jquery:true, unused:false, loopfunc:true */
/*global jQuery: false, localStorage: false, navigator: false */

[Mottie]

The scroller widget is in the widgets sub-directory: https://github.com/Mottie/tablesorter/blob/master/js/widgets/widget-scroller.js

[MentorEdit]

Hi ,

I tried to add the widget code ,i could see the scroll bars as expected but the header names are missing and the thead column sizes shrinked . Is there anything I am missing still .

[Mottie]

Are you including the theme css file (e.g. theme.blue.css)?

[MentorEdit]

yes , I included.

[MentorEdit]

The headers are not text nodes , its input. But i tweaked the tablesorter files to element.val() instead of text() . So all the other widgets and tablesorter including the cssstickyheader is perfectly working as i expected. But when i add scroller , the headers donot show the names.

[Mottie]

Can you modify this demo to show how you are using the plugin, it would make it easier to understand what issues you are encountering.

[MentorEdit]

please check this link , http://jsfiddle.net/abkNM/3001/ thanks for your time.

[MentorEdit]

In the actual tablesorter.js line 483 it was c.headerContent[index] = $(this).text(); , since i was using the textarea element as header content , i changed it to c.headerContent[index] = $(this).val(); By doing this I had no problem in integrating this plugin into my code. But when I try using scroller , the header names are missing. Not sure if this information helps.

Thanks,

[Mottie]

It sounds like you're using an older version of tablesorter. The code you shared from tablesorter.js has changed and is now (ref):

c.headerContent[index] = $(this).html();

That being said, if you change the code in the demo you shared to instead add the header title as innerHTML, it works (demo):

text2.innerHTML = "heading"+i;

[MentorEdit]

ok , I am using filter , columnselector , pager , columns widgets as well . So will there be any change if I update this new version of tablesorter.js . Should i change all of the files ?

[Mottie]

Yes, update everything.

You should also be using the parser-input-select.js file. Don't forget to set the parser:

cell2.className = "sorter-inputs";

And here is a demo of it working (demo).

[MentorEdit]

Ok thank you so much for your time , will update everything right away . Thanks once again.

[MentorEdit]

Hi Mottie ,

I added the scroller widget and changed all the files as you suggested. Now I can see the names on the thead , but the widths of the thead are completley changed now. And I get two sets of sort icons one outside the text area box and one inside the text area box in the headers. I tried checking out the code but had no clue of why this wierd formatting is occuring. Any help would be appreciated.

Thanks,

[MentorEdit]

The first screen shot is with scroller widget attached.

The second one is without scroller widget

Thanks

[Mottie]

It appears that the textarea is too narrow, so what you are seeing is a scroll bar to scroll vertically through the text. Try setting a minimum width to the textarea, something like this:

.tablesorter-header textarea {
    min-width: 50px;    
}

In all honestly, I would not recommend using a textarea in the table header in the first place.

[MentorEdit]

@ Mottie , Thank you so much , you are awesome. I did not think about the width at all. I know that its not a good option to use text area , but the requirement is that they need a tool tip for the header names , and the header name should be wrapped .Input element text cant be wrapped so ended up using text area. Please let me know if you think of any option I would always be ready to learn. And can you please tell me how I can fix the individual column sizes using the tablesorter.

Thanks much!

[Mottie]

The column widths can be controlled by adding a class name to the header cells ([demo]()):

<thead>
    <tr>
        <th class="an">AlphaNumeric</th>
        <th class="n">Numeric</th>
        <th class="a">Animals</th>
        <th class="s">Sites</th>
    </tr>
</thead>

then setting the width using css:

.an { width: 10%; }
.n { width: 5%; }

[MentorEdit]

@Mottie

I tried the above way to set the column widths. It doesn't work :( . I don't have any control on the header once scroller widget is added. I tried width , maxWidth, minWidth , using class name , applying directly to the element using "style.width " but nothing worked. The headers are shifted to right , now the thead and tbody does not match up at all. Can you please tell me where I can fix this.

Thanks.

[Mottie]

Hmm, that does appear to be a problem with the scroller widget. I'll work on something to make that aspect of it behave properly.

[MentorEdit]

@Mottie

Thanks will wait for the update .

[MentorEdit]

Hey Mottie ,

Any luck with this. Can you guide me on how to fix this issue.

Thanks,

[Mottie]

Sorry, my time has been limited lately. I did fix the problem, but it only looks good with certain themes. The basic ones like blue, default, blue ice, etc; not so good with jQuery UI & Bootstrap.

Once I get the alignment corrected, I'll push the fix out to the working branch, and/or the master.

[MentorEdit]

Ok I am using the blue theme , so can you please guide me on what you did for this fix , I will try to implement in my code. I have a deployment this week. So need to push this soon. Sorry for the trouble .

[Mottie]

@dfdfdfgfgrgr!

Sorry for all the delays. Please try the scroll widget code now, and check out the updated demo.

[MentorEdit]

@Mottie Thanks for the update , but can you please see the below screen shot and tell me whats wrong . There is one row with headers and that width matches perfectly with tbody but not the new header which was attached after scroller widget .I replaced the scroller widget with the new one.

[Mottie]

That screen shot looks like the scroller widget is being initialized twice, or something. The header row seen under the filters shouldn't be there (it's hidden) unless something else has gone terribly wrong.

Can you share your code?

[MentorEdit]

I am able to hide it by using this $("#tableone th:first").hide(); but I still cant figure out how to set the widths . The thead and tbody are completley of different widhts. Please suggest me something .

Thanks.

[Mottie]

I can't suggest anything else unless I know what's going on... also, you should not have to add code and/or CSS to hide the thead of the original table, the scroller widget does that for you.

So what I need to know is:

• Does this scroller widget demo work for you? If not, what browser are you using?
• Does this updated demo work for you?
• What does your initialization code look like?
• Are you using the most up-to-date versions of tablesorter, tablesorter widgets, scroller widget & pager?
• Did you modify the plugin or widget code at all?
• Do you have any CSS that might be interfering?

Right now I can only guess at the source of the problem.

[MentorEdit]

Hey Mottie , I replaced all the files with new versions as you said. And you were right , one of the file was of old version . Now the extra thead gets hided and I am not applying any css .

• Does this scroller widget demo work for you? If not, what browser are you using? YES
• Does this updated demo work for you? YES
• What does your initialization code look like?
• Data will come from servlet , will form 30 columns with headers and column cell content, then apply tablesorter plugin with theme blue,filter, pager, scroller, column selector widgets.

$('#tableone').tablesorter({
    theme: 'blue',
    widthFixed : true,
    initWidgets: true,
    showProcessing: true,
    headerTemplate: '{content}',
    headers: {
        0: { sorter: "input" },
        1: { sorter: "false" ,filter:"false" },
        2: { sorter: "input" },
        3: { sorter: "input" },
        4: { sorter: "input" },
        5: { sorter: "input" },
        6: { sorter: "input" },
        7: { sorter: "input" },
        8: { sorter: "input" },
        9: { sorter: "input" ,filter:"true" },
        10: { sorter: "numberWithCommas" ,filter:"false" },
        11: { sorter: "numberWithCommas" ,filter:"false" },
        12: { sorter:"false" ,filter:"false" },
        13: { sorter: "false" ,filter:"false" },
        14: { sorter: "false" ,filter:"false" },
        15: { sorter: "false" ,filter:"false" },
        16: { sorter: "false" ,filter:"false" },
        17: { sorter: "false" ,filter:"false" },
        18: { sorter: "false" ,filter:"false" },
        19: { sorter: "false" ,filter:"false" },
        20: { sorter: "false" ,filter:"false" },
        21: { sorter: "false" ,filter:"false" },
        22: { sorter: "false" ,filter:"false" },
        23: { sorter: "false" ,filter:"false" },
        24: { sorter: "input" ,filter:"false" },
        25: { sorter: "input" ,filter:"false" },
        26: { sorter: "false" ,filter:"false" },
        27: { sorter: "numberWithCommas", filter:"false" },
        28: { sorter: "input",filter:"true" },
        29: { sorter: "numberWithCommas",filter:"false" }
    },
    selectorHeaders: 'thead th',
    widgets: ['filter','columnSelector','columns','scroller'],
    widgetOptions: {
        filter_childRows  : true,
        filter_cssFilter  : 'tablesorter-filter',
        filter_startsWith : false,
        filter_ignoreCase : true,
        filterCaseSensitive: false,
        filter_saveFilters : true,
        filter_useParsedData : true,
        filter_reset : '.reset',
        filter_functions : {
            0:true, 2:true, 3:true, 4:true, 5:true, 6:true, 7:true, 8:true, 9:true, 28:true
        },
        columnSelector_container : $('#columnSelector'),
        columnSelector_columns:
        {
            0 : 'disable' , 1 : 'disable' , 2 : 'disable' , 3 : 'disable' , 4 : 'disable' , 5 : 'disable' ,
            6 : 'disable' , 7 : 'disable' , 8 : 'disable' , 9 : 'disable' , 10 : 'disable' , 11 : 'disable',
            16 : false, 17: false, 18: false, 19: false, 20:false, 21:false, 22:false, 23:false,
            24 : 'disable',25 : 'disable',26 : 'disable',27 : 'disable',28 : 'disable',29 : 'disable'
        },
        columnSelector_saveColumns: true,
        columnSelector_layout : '<label><input type="checkbox">{name}</label>',
        columnSelector_name  : 'data-selector-name',
        columnSelector_mediaquery: false,
        columnSelector_mediaqueryName: 'Auto: ',
        columnSelector_mediaqueryState: false,
        columnSelector_breakpoints : [ '20em', '30em', '40em', '50em', '60em', '70em' ]
        //cssStickyHeaders_offset     : 100,
        //cssStickyHeaders_addCaption : true,
        //cssStickyHeaders_attachTo   : null,
    }
}).tablesorterPager({
    container: $(".pager"),
    output: '{startRow} to {endRow} of {totalRows} records',
    size: 25
});

• Are you using the most up-to-date versions of tablesorter, tablesorter widgets, scroller widget & pager? YES
• Did you modify the plugin or widget code at all? I modified where ever .text() is used to get the cell content to val() , as i am using input:type=text inside td. And textarea inside th.
• Do you have any CSS that might be interfering? I tried applying my own css using cell1.style.maxWidth="30px" on each th. But no control on widths.

When I updated all the files with new versions I see the columnselector widget is breaking. check the screen shot. And still I can see the thead is slightly moved to the right after scroller is applied.

Thanks,

[Mottie]

I think part of the problem is that the textarea and input have a default width, so you need to override them. I "seems" that the screen shot already includes the css I shared in this demo, but I'm not 100% sure.

tbody td { text-align: center; }
thead div textarea, tbody input {
    resize: none;
    width: 95%;
    background: transparent;
    border: 0;
    box-sizing: border-box; /* this is important! */
}

Also, is it really necessary to show a table with 29 columns? Do your users plan to try to access this page via a mobile device?

[MentorEdit]

Hey Mottie .. Its been a long day , sorry for the late reply. This app needs 29 cols, thats the reason i am using column selector to hide/show columns. This is a web app and not for mobile device. I am really not sure now If i need to use the scroller widget or not. I am completley loosing control over the widths of the columns of the tbody and thead once applied. FYI the .header0{width:20%} is not working . Please let me know if you think there is way to adjust the widths. Thanks,

[Mottie]

In the demo I shared before, I added this bit to the code... I'm not sure if you noticed:

cell2.className = "sorter-inputs header" + i;

it's what adds the class name header0, header1, etc to each header cell.

[MentorEdit]

@ Mottie yes i tried by adding the class name to the th element but no luck.

[MentorEdit]

hey just now noticed , i could actually control the width of thead using the classname, but not the td in the tbody any idea on this ?

[Mottie]

Oh, I just realized that you have the widthFixed option set to true... remove that from the initialization code; what it does is creates a <colgroup> with a <col> for each column set at the starting width, so it may interfere with your other settings.

[MentorEdit]

@Mottie I changed it to false , and now able to adjust the widths of th and td using text1.style.maxWidth="10px" and the same for td as text2.style.maxWidth="20px"; There is a difference in how the width is set to thead and td , may be because of the sort icons occupying the space. I am just trying to adjust the space of td as per thead. Thank you so much for sticking to this issue and helping me to understand and resolve this.

[MentorEdit]

@Mottie

I am sorry , was happy for one second that it was working but its not . I could only control thead widths. I am left with this issue , which is really consuming my time. They were fine till I reload the page , once reloaded , it comes up with the old width settings.

Thanks,

[MentorEdit]

@Mottie This is an old issue which I opened long back about the scroller widget. I applied the widget , I could edit the widths of the columns but for some reason the changes are not getting saved. So when ever I minimize and maximize the window the th td widths are getting changed. Let me know if you have any idea.

Thanks,

[Mottie]

Hmm, maybe I need to include a copy of the <colgroup> & <col> as well... I'll look into this when I get some free time.

[MentorEdit]

Hey Mottie ,

Thanks for the reply , I am actually in a bit rush and thinking if you can guide me in what we can do about this. The first time the th and td are aligned properly , but on refresh the td's are not sticking to th widths .Is there any way i can fix this.

Thanks,

[Mottie]

Sorry, I didn't read the old comments when I last posted about including the <colgroup> and <col>s.

What happens if you resize the browser window, do the th & td widths align?

Is there a way you can modify one of the above demos to duplicate the issue being described?

[MentorEdit]

@Mottie : with scroller widget , on initial launch the headers are respecting the widths which we apply , but once we resize the browser window the headers expand or some how the widths change. I am not sure if I can replicate this with demo but will try .

[MentorEdit]

http://jsfiddle.net/cCzqn/355/

This is the link with the replication of the table ; Just try doing F12 and you can see the header shrinking on the right most end , This happens when ever I click a button which is just above the table on my page also .

[MentorEdit]

And even when i expand or extend the browser window also.

[Mottie]

I can not duplicate the issue being described here. I tried all of the following in both Chrome and Firefox:

• I resized the browser of that demo and I did not see any misalignment of the columns.
• I tried resizing the result iframe.
• I resized a few header textareas, and the columns still line up (even though the textareas overflow into the next cell).
• I scrolled all over, sorted the table and even thought about kicking it in the jimmy...

At this point I guess I would have to ask for a video showing the problem so I can understand the difference between what I am seeing and the reported issue. Try out screenr, it's a nice online video capture website that requires minimal effort.

[MentorEdit]

Hey Mottie , was busy and could not reply , I cant share the video of the application because of the confidential issues . But one thing I noticed is , the widths which i set to td's / columns change when i click a button , or close a div element . Any help on this would be very helpful.

[TheSin-]

I don't have an F12, can you add a button to it to show me so I can see it? I can't seem to reproduce it either honestly.