Tablesorter toolbar

[Mottie]

I'm looking for some feedback on how/where to add a tablesorter option button... kind of like shown in issue #413, but not specific for Bootstrap + font-awesome.

What I would eventually like to do is set up a plugin option something like this (data-method is some made-up - for now - data-attribute, so the plugin knows what to do with each option):

Options popup HTML

<div class="options"> <!-- hidden with css initially -->
  <i class="icon-reset" data-method="sortReset">Reset Sort</i>
  <i class="icon-reset" data-method="resizeReset">Reset column Sizes</i>
  <hr>
  <i class="icon-reset" data-method="filterReset">Reset Filters</i>
  <i class="icon-toggle" data-method="toggleFilterRow">Toggle Filter Row</i>
  <i class="icon-case" data-method="toggleCase" data-alt="FIlter case insensitive">Filter case sensitive</i>
  <hr>
  <select data-method="changeTheme">
    <option>Choose a theme</option>
    <option> <!-- more options here --> </option>
  </select>
  <i class="icon-save" data-method="saveState">Save Current State</i>
</div>

Initialization

$('table').tablesorter({
  // the same block can be used for multiple tables
  userOptions: '.options'
});

In case no user options are defined, I think each widget could automatically add some user adjustable options. This will mean more widget coding.

Positioning the options can be done by the developer, but in case none is defined, I think adding a "second" hidden caption would work - even though it isn't considered valid HTML, it appears to work in modern browsers (IE9+) - demo

<table class="tablesorter">
    <caption>main caption</caption>
    <!-- extra caption for table options (not valid html) -->
    <caption class="options">o</caption>
    <thead>
    <!-- etc ... -->
</table>

[mohitmayank]

I personally keep a header above the table. I dont have the code as of now but here's a screen shot.
An extra header bar, where widgets can be placed along with options button. something like datatables. http://datatables.net/extras/tabletools/

this screenshot is of tablesorter using bootstrap.

[thezoggy]

why not check out what the competition does?

[Mottie]

Why not be different/unique? ;P

Actually, I just want to make the setup process as easy and fully customizable as possible.

And honestly, I don't really like how datatables does it.

[mohitmayank]

why not take ideas from peers and improvise. :)
Agreed. Configuring datatables is a pain.
I meant the extra header specifically. a small bar say, 10px, wont hurt much for default case.
hover/focus triggers become a problem in mobiles.

[Mottie]

@mohitmayank If your screenshot above is of tablesorter, care to share any of the code used to make those buttons work? :P

[TheSin-]

and how well does the print one work? I can only get mine semi working, it seems to cut off anything that is multi page long :\

But I agree with Mottie that looks great I'd love to see the code for it.

[mohitmayank]

As much as it looks good (And that is thanks to the awesome bootstrap) the code looks that much mess. In my defense it had a lot of legacy and comments were in Hindi-English Mix.

I have removed most of my framework specific code. (i hope)

Once i do get time, i'll try to format it into something more usable.

https://gist.github.com/mohitmayank/8043113

@TheSin- i get MultiPage Grids on multiple pages.
@Mottie - I am a noob in Javascript. This is something which i did after being irritated by a lot of other Backbone related grids. I would love to turn it into a tablersorter's backbone derivation. But i'll need help.

I'll comment the code in due course. and will make this good enough to share.

[mohitmayank]

i think i'll put a brief description here -- for column display toggle, i use css classes. pretty easy to hack that one. for download in csv, i keep a record of the data inserted into table (I never checked if tablesorter itself keeps that - i was keeping such record even before i used TS), i am taking the ID's from the filtered rows to filter out the local copy of data for making csv. Print is just a simply hack. I open the whole table in a new window and print it. That new button is a just a Backbone route. I have a upload button using uploadify. one button for starting table sorter and one for filter refresh. thats pretty much it.

I also have a aggregation system going on (placing that in footer). once i finish that and get some time from office, i'll wrap it all up.

[TheSin-]

very nice and good work, I'd love to see your print and cvs code for sure. As I use both and I have a very hack way to do it as well ;)

[Mottie]

@TheSin- He did share it in that gist link... and what about you? Care to share? :P

[TheSin-]

I'm going to check out this "gist" thing ;) most of my mods are now back into git, most of my code blocks are being using via different ifames (yuck I know, but it was easiest for me since it's a large app and I didn't want to reload menus and such all the time). That being said I'd be happy to share any of my work, I can post my tool bar as well, but I think @mohitmayank 's is way nicer ;) I've actually considered changing some of my code thanks to his ;)

@mohitmayank how do your controls work with mobile (touchscreen) devices, I always find dropdops/popups a little clumsy with touchscreen it's why I stayed away from them in the past. But yours seems really nice.

[mohitmayank]

@TheSin- it's working real great on android (with chrome) and chrome on Ubuntu desktop with touchscreen. I recently started optimizing for mobile screens. and no issues so far. the only real problem is hover/focus triggers, which i have mostly ported to click.

But i guess we have went off-topic here.

@Mottie I suggest a toolbar. it can be a widget itself or a place holder.