简体   繁体   中英

Javascript sort non-linear table

I have table like that :

<table id="table_id" class="tablesorter">
<thead>
<tr class="trheader">
<th colspan="2">111</th>
<th>-SORT-ME-</th>
<th>222</th>
<th>333</th>
</tr>
</thead>

<tbody>
<tr>
<td id="id_1"><img src=""></td>
<td id="id_11">11</td>
<td id="id_12">===SORT.VALUE===</td>
<td id="id_13">13</td>
<td id="id_14"><a href="#" class="send_data"><img src=""></a></td>
</tr>
<tr>
<td id="id_t1" colspan="5" onclick="some_func">
<label for="id_i1">_lbl_</label>
<img id="image_1" src=""></img>
<div id="id_i1">
</div>
</td>
</tr>

<tr>
<td id="id_2"><img src=""></td>
<td id="id_21">21</td>
<td id="id_22">===SORT.VALUE===</td>
<td id="id_23"></td>
<td id="id_ordbtn_2"><a href="#"><img src=""></a></td>
</tr>
<tr>
<td id="id_t2" colspan="5" onclick="some_func">
<label for="id_i2">_label2_</label>
<img id="image_2" src="">
<div id="id_i2">
</div>
</td>
</tr>
... more of the same...
</tbody>
</table>

Is it somehow possible to use JQuery tablesorter or other script to sort the table based on values in -SORT-ME- // ===SORT.VALUE=== // ===SORT.VALUE=== and to keep the table displayed properly, as i tried to use tablesort(er) and it messes it ( start do switch rows... displays the table broken ) It's because of the second :: colspan=5 data, that makes the table non uniform or non-standard or i don't know the exact phrase for that, i hope you get what i'm trying to say.

Sorry for the not very informative description of the problem, but as you've already guessed English is not my native language and i struggle when i need to explain more complicated things.

Thank you guys, your help is greatly appreciated.

Are you trying to add a child row that gets sorted along with the parent row?

If so, I found this demo on doing just that. It is actually part of the tablesorter plugin v2.0.5 but it isn't documented. So you can just copy the html and code they use, but you don't need to download the mod.

I've added the missing documentation in a blog post I made and I've forked and modified the plugin itself on github and made another child row demo , if you are interested.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM