Issue with bootstrap and tablesorter zebra

[jacklightbody]

If I have this table

<table class="bordered-table sortable zebra-striped">
<thead><th>Column 1</th><th>Column 2</th></thead>
<tr><td>test</td><td>1</td></tr>
<tr><td>blah</td><td>3</td></tr>
<tr><td>testing</td><td>2</td></tr>
</table>

and I apply table sorter paging like this:

<script type="text/javascript">
$(document).ready(function() { 
$(".sortable").tablesorter(); 
  $("table") 
  .tablesorter({widgets: ["zebra"]}), 
  .tablesorterPager({container: $("#pager"),positionFixed: false}); 
}); </script>

then the sorting doesn't work (you can click it, but it doesn't actually sort). Removing

.tablesorter({widgets: ["zebra"]}) 

seems to work though. I am currently loading only pager and tablesorter. Is the widgets file required for this?

[thezoggy]

well there is a boostrap support in an unreleased version of tablesorter.. but just at quick glance your classes for the table is incorrect for bootstrap v2. as you need 'table table-border table-striped' and as of 2.1.0 table-hover

bootstrap uses nth-child(odd/even) to do its zebra striping.. which you could just use instead of the zebra widget (if you dont use filter/hide rows)

to use the zerba, the widgets js is not needed as its built into the core js. but to use the pager addon you need to include it's js and css.

[thezoggy]

found this tonight while browsing, http://bootstrap.stage42.net/doc/tables

notice the bottom example does tablesorter (old version) with bs.

[Mottie]

Actually that is DataTables =/

[jacklightbody]

I have bootstrap v1.4... so maybe thats causing the issue.
I solved it by not using the zebra widget- but this is still an issue.
I am including pager css and js.

[thezoggy]

At the movies seeing batman. Will be online at 830pm (work). Talk to ya then

[thezoggy]

ok at work, mottie if you wanna jump on irc

[Mottie]

Bootstrap themes can now be added using the uitheme widget. Check out this demo.

[thezoggy]

see a few issues.. mainly just cosmetic stuff.
you dont need to specify the width for the element as your using the 'input-*' sizing.. i'd change it from input-small to mini. you should remove the padding.. creates some funky text vertical alignment. anyways just hollar at me on irc for the specifics

[Mottie]

@thezoggy I'll have to get back with you on Sunday, if you're around, or Monday about what changes you mean... I really should just add you as a contributor ;)

[thezoggy]

no worries, just hollar at me then. ive been busy myself lately :)

[potsky]

Hi!

Is zebra really working with bootstrap and themeui ? I am trying but nothing to do.
If you take the demo above and just select filter female with zebra On, zebra does not work.

Here is a screenshot on last release of Safari on Mac OS X 10.8.2 :

[Mottie]

Hmm LOL yeah I think that's just an issue with that demo. The "table-striped" class isn't being removed when the zebra widget is enabled. I'll fix it soon.

[potsky]

:-)