Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Issue with bootstrap and tablesorter zebra #111

Closed
12345j opened this Issue · 13 comments

4 participants

@12345j

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
Collaborator

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
Collaborator

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

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

@Mottie
Owner

Actually that is DataTables =/

@12345j

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
Collaborator
@thezoggy
Collaborator

ok at work, mottie if you wanna jump on irc

@Mottie
Owner

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

@Mottie Mottie closed this
@thezoggy
Collaborator

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
Owner

@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
Collaborator

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

@Mottie
Owner

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

:-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.