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.

[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.

[TheSin-]

how much do the change and do they return after? It's hard to fix in the dark.

[MentorEdit]

@Mottie
I solved this finally. The issue was the table-layout was fixed , when i changed it to automatic now its not changing. Thank you so much for your time. You can close this issue.

Thanks,

[Mottie]

Oh, I'm glad you solved it. When I started working on this project I didn't think about that css setting and thus all the themes are designed without it set. I'll have to add updating the theme files to my to-do list.
😿 hehe

[ckarthikin]

Hi Mottie,

Thank you so much for a wonderful script. For the past one year i have used your script for filtering, and paging...currently i am implemented the scroller for first two columns. after implementing that filtering for first columns got disabled and content not changing for first columns while changing the paging...could you please help me on this..thank you so much..Karthik.c

[Mottie]

Hi @ckarthikin!

Did you update core and all the widgets along with the scroller widget? Can you share the initialization code being used? An actual demo of the problem would really help me narrow down the problem.

[ckarthikin]

Ya i have used updated code...my code is below

 <script type="text/javascript" src="JSNEW/jquery-latest.min1.11.0.js"></script>    
    <script src="JSNEW/jquery.tablesorter2.21.3.js" type="text/javascript"></script>
    <script src="JSNEW/jquery.tablesorter.widgets2.21.3.js" type="text/javascript"></script>
    <script src="JSNEW/widget-scroller2.21.5.js"></script>  
    <script src="js/jquery.tablesorter.pager2.21.0.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $.tablesorter.themes.bootstrap = {
            table: 'table table-striped table-hover table-bordered',
            caption: 'caption',
            header: 'bootstrap-header',
            sortNone: '',
            sortAsc: '',
            sortDesc: '',
            active: '',
            hover: '',
            icons: '',
            iconSortNone: 'bootstrap-icon-unsorted',
            iconSortAsc: 'icon-chevron-up glyphicon glyphicon-chevron-up',
            iconSortDesc: 'icon-chevron-down glyphicon glyphicon-chevron-down',
            filterRow: '',
            footerRow: '',
            footerCells: '',
            even: '',
            odd: ''
        };

        $("#GridView1").tablesorter({
            theme: "bootstrap",
            //widthFixed: true,
            showProcessing: true,
            headerTemplate: '{content} {icon}',
            widgets: ["uitheme", "filter", "zebra", "scroller"],
            widgetOptions: {
                scroller_height: 300,
                scroller_fixedColumns: 3,
                scroller_rowHighlight: 'hover'
            }            
        })
.tablesorterPager({
                   container: $(".ts-pager"),
                   cssGoto: ".pagenum",
                   removeRows: false,
                   output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'

               });
    });
 </script>
-----------------

    <table class="table table-bordered table-striped">
                <tfoot>
                    <tr>
                        <th colspan="7" class="ts-pager form-horizontal">
                            <button type="button" class="btn first">
                                <i class="icon-step-backward glyphicon glyphicon-step-backward"></i>
                            </button>
                            <button type="button" class="btn prev">
                                <i class="icon-arrow-left glyphicon glyphicon-backward"></i>
                            </button>
                            <span class="pagedisplay"></span>
                            <!-- this can be any element, including an input -->
                            <button type="button" class="btn next">
                                <i class="icon-arrow-right glyphicon glyphicon-forward"></i>
                            </button>
                            <button type="button" class="btn last">
                                <i class="icon-step-forward glyphicon glyphicon-step-forward"></i>
                            </button>
                            <select class="pagesize input-mini" title="Select page size">
                                <option value="5" selected="selected">5</option>
                                <option value="10">10</option>
                                <option value="15">15</option>
                                <option value="20">20</option>
                            </select>
                            <select class="pagenum input-mini" title="Select page number">
                            </select>
                        </th>
                    </tr>
                </tfoot>
            </table>

 <asp:GridView ID="GridView1" runat="server" Width="1000px" AutoGenerateColumns="true" 
                EmptyDataText="No record Found" CssClass="table table-striped table-bordered">                
                <AlternatingRowStyle Wrap="False" />
                <EditRowStyle Wrap="False" />
                <EmptyDataRowStyle Wrap="False" />
                <HeaderStyle Wrap="False" />
                <RowStyle Wrap="False" />
                <SelectedRowStyle Wrap="False" />
                 <PagerStyle CssClass="bs-pagination" />   
            </asp:GridView>

[ckarthikin]

my code gets scattered in view..can i send through mail...

[Mottie]

All you needed to do was wrap the code with a triple back tick `

```html
<!-- html code here -->
```

What does the formatted table HTML look like? You can just provide an example if the data is sensitive.

[Mottie]

It looks like you need to update the core & widgets all to v2.21.5 to match the scroller widget version.

Also @TheSin- pointed out that you might not want to use the tablesorter pager along with GridView's pager. Tablesorter's pager would not show an accurate page number or count. So, either use one or the other.

[ckarthikin]

Hi i have updatd all the cored to 2.21.5..I am not using GridView's pager.i am using Tablesorter's pager only...the problem is fixed column values not getting changed whule selecting the next page...i have finded a reason disabling which is mentioned in the previous post...thanks for the help...

[Mottie]

I wonder if the problem is because you're using the pager... when I updated the scroller widget, I didn't think it would ever be used along with the pager.

I don't know how GridView does it's paging... does it reload the entire page or just update the table? If it is only updating the table then you'll probably need to trigger an "update" or "setFixedColumnSize" event on the table after the table has updated; hopefully there is a GridView event or some indication that the table has updated.

---

Maybe this will work? http://forums.asp.net/t/1900937.aspx?how+can+call+javascript+function+on+gridview+paging+