[jQuery] Re: Applying Table Row Sorter to Multiple Tables

IDs are unique for a document. A document containing multiple elements with the same ID is invalid. Use a class instead and invoke tablesorter on all tables with that class.

e.g.
<table class="tablesorter">
...
</table>

and

$("table.tablesorter").tablesorter({ widgets: ['zebra'] });

On Wed, Apr 29, 2009 at 20:35, David Blomstrom <david.blomstrom@gmail.com> wrote:

I'm using jQuery's tablesorter.js to create tables with sortable rows, as applied to tables with the ID "myTable."

I just wondered if there's a way to make it work with multiple tables on a single page. I created two tables and gave each of them the ID myTable, but only the first table worked. I can't remember if the specific ID is required for my Zebra widget (alternate row colors), too, or not, but I would guess it is.

I posted my JS links below, to show you my setup. Thanks for any tips.

* * * * *

<script src="http://MySite/js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script src="http://MySite/js/tablesorter/jquery.tablesorter.js" type="text/javascript"></script>
<script language="JavaScript" type="text/JavaScript">
 $(document).ready(function() 
  { 
  $("#myTable").tablesorter({ widgets: ['zebra']} );

$("#triggerMS").click(function(){
 $("#menuMS").show();
 return false;
});
$("#menuMS").click( function(){
 $("#menuMS").hide();
 return true;
});

$("#triggerReg").click(function(){
 $("#menuReg").show();
 return false;
});
$("#menuReg").click( function(){
 $("#menuReg").hide();
 return true;
});

$("#triggerKids").click(function(){
 $("#menuKids").show();
 return false;
});
$("#menuKids").click( function(){
 $("#menuKids").hide();
 return true;
});

$("#triggerLinks").click(function(){
 $("#menuLinks").show();
 return false;
});
$("#menuLinks").click( function(){
 $("#menuLinks").hide();
 return true;
});

$("#triggerBooks").click(function(){
 $("#menuBooks").show();
 return false;
});
$("#menuBooks").click( function(){
 $("#menuBooks").hide();
 return true;
});

  }
 );
</script>

--

David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org

--

David Blomstrom
Writer & Web Designer (Mac, M$ & Linux)
www.geobop.org