Issue with bootstrap and tablesorter zebra #111

jacklightbody opened this Issue Jul 20, 2012 · 13 comments


None yet

4 participants

If I have this table

<table class="bordered-table sortable zebra-striped">
<thead><th>Column 1</th><th>Column 2</th></thead>

and I apply table sorter paging like this:

<script type="text/javascript">
$(document).ready(function() { 
  .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?


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.


found this tonight while browsing,

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

Mottie commented Jul 20, 2012

Actually that is DataTables =/

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.


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


ok at work, mottie if you wanna jump on irc

Mottie commented Sep 27, 2012

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

@Mottie Mottie closed this Sep 27, 2012

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 commented Sep 29, 2012

@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 ;)


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

potsky commented Jan 7, 2013


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 :
Screen Shot 2013-01-07 at 14 24 15

Mottie commented Jan 7, 2013

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 commented Jan 7, 2013


@Mottie Mottie added a commit that referenced this issue Jan 7, 2013
@Mottie Mottie updated bootstrap demo - issue #111 3851ea9
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment