CODEWITHSUNDEEP
javascriptjqueryhtmltablesorter
htw
htw

Reputation: 179

Table sorting from multiple tables

i'm using jquery and the jquery plugin "tablesorter" (http://tablesorter.com/docs/) to sort a table. now I have the difficult, that I have following html (an other way is impossible):

<table class="tablesorter">
<tr>
       <th>ID</th>
       <th>Name</th>
       <th>Age</th>
   </tr>    
</table>
<table>
   <tr>
       <td>1</td>
       <td>Bob</td>
       <td>24</td>
   </tr>
</table>
<table>
   <tr>
       <td>1</td>
       <td>James</td>
       <td>33</td>
   </tr>
</table>
<table>
   <tr>
       <td>5</td>
       <td>PJ</td>
       <td>28</td>
   </tr>
</table>
<table>
   <tr>
       <td>1</td>
       <td>Sue</td>
       <td>39</td>
   </tr>
</table>

In every table is one line. Now I want to sort this many tables as it is one table. Is there any solution for this problem?

I've found an attempt here: http://jsfiddle.net/Mottie/8cg4f/31/ But there are ony two tables and the script only sort the data from one table.

Upvotes: 0

Views: 1114

Answers (2)

Sinetheta
Sinetheta

Reputation: 9429

Target the tables you want to pillage, drill down to the <tr>s, move them to where they need to be, climb back up to the (now empty) <table>s, throw them away. jsFiddle

$('table:not(.tablesorter)').find('tr').appendTo('.tablesorter')
    .end().end().remove();

EDIT: as per comment I have simulated "spacing between <tr>s" by using padding on the <td>s jsFiddle.

If you have other requirements for the final page, just let me know what you'd like to end up with and I can help create a solution that will yield valid html which displays consistently for all your users.

Upvotes: 1

Kevin B
Kevin B

Reputation: 95031

Try something like this:

var $table = $(".tablesorter");
$table.nextAll("table").children().appendTo($table).end().remove();
$table.tablesorter();

Upvotes: 0

Related Questions