1

See code here

Hi I'm very new to using JQuery and only know a few basics and I'm having trouble figuring out how to keep stripes in the right place when a table is sorted. They seem to be fine at first, but anything else in the header clicked on and the table colors go berzerk.

Now, I've come across a few answers to the question, but my problem is that I have very little knowledge of knowing where the piece of code is needed to be placed. So I don't know what code is the closest to being correct because the only responses from the site I'm testing seem to be that either I can click on the header, but the table still sorts the colors out of order (so its like the code didn't do anything) or the header doesn't respond at all.

The code uses the jQuery JavaScript Library v1.4.2 and it also uses the tablesorter 2.0 plugin by Christian Bach. What I think I have to do is manually add some sort of widget that will reset the stripes to where they were the first time, or keep the stripes from changing after load.

What I've been doing to add the code in is by making a new script like:

for some reason if I add a < before the 'script' some of the code disappears

<script type="text/javascript" id="js">
  $(document).ready(function() {
  { 
    $("#myTable").tablesorter({ 
      widgets: ['zebra'] 
    }); 
  }); 
</script>

I've tried putting it in the /head with the other scripts, but it's still really hard to tell what is right if the test site only gives a few of the same responses every time. (I'm using firebug to test) Is there something specific that I forgot about? I don't exactly know if this code is properly referencing back to jQuery, but I could really use anyone's input.

4
  • How do you create the stripes in the first place?
    – Tomalak
    Jun 15, 2011 at 13:37
  • the code is pretty long...but not hard to figure out I don't think. I just don't know how to attach it to something yet lol
    – Will
    Jun 15, 2011 at 13:49
  • It doesnt work automatically? The demo on the tableSorter homepage keeps the striping consistent.
    – daybreaker
    Jun 15, 2011 at 13:55
  • I have a link to the page at the top if you can't access it for some reason let me know, just view the source after you get there
    – Will
    Jun 15, 2011 at 14:01

2 Answers 2

0

The zebra widget, by default, adds class names of "odd" and "even" for styling. So just change the widgetZebra option to match your css styling:

$("table").tablesorter({
    // sort on the first column and third column, order asc
    sortList: [[0,0],[0,1]], widgets: ['zebra'], widgetZebra: {css: ["alt",""]}
});
0
0

While it will be difficult at first to change the way you're outputting the data (because it sounds that you are currently manually outputting the data in an HTML table, then using Javascript to sort the table dynamically), but in the long run using a different jQuery plugin altogether, JQGrid.

From a cursory glance, it looks as if it has a "plugin" of its own that takes a pre-existing table and converts it to a jqgrid, but I've only ever used Jqgrid to make grids from the ground up.

If you're not sure, take a look at their demo to see it in action. I think once you see the power that jqgrid provides, you'll consider letting it do the heavy lifting for you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.