Killrawr Killrawr - 4 months ago 13
Javascript Question

Sorting multiple rows linked with one another (fiddle examples included)

How can I sort multiple rows (rows with colspan, linked to the targetted sort row) with sorttable.js

I have tried to slightly modify the source to support multiple rows, but it breaks the fundamental sorting of data contained in

Array
of
row
data. Here is the modified version of sorttable.js (my attempt at multiple rows)

What I'm trying to accomplish

<table id="data_table" class="sortable">
<colgroup>
<col clas="item1" />
<col class="item2" />
<col class="item3" />
</colgroup>
<thead>
<th class="item1">Item 1</th>
<th class="item2">Item 2</th>
<th class="item3">Item 3</th>
</thead>
<tbody>
<tr id="row-item-0" class="item_row" data-sorttable_row_key="0" data-sorttable_original="true" >
<td class="item1">Data 1</td>
<td class="item2">Data 2</td>
<td class="item3">Data 3</td>
</tr>
<tr id="row-item-0-1" class="item_row" data-sorttable_row_key="0" data-sorttable_original="false" >
<td colspan="3">
Details regarding Data 1,2,3
</td>
</tr>
<tr id="row-item-1" class="item_row" data-sorttable_row_key="1" data-sorttable_original="true" >
<td class="item1">Data 4</td>
<td class="item2">Data 5</td>
<td class="item3">Data 6</td>
</tr>
<tr id="row-item-1-1" class="item_row" data-sorttable_row_key="1" data-sorttable_original="false" >
<td colspan="3">
Details regarding Data 4,5,6
</td>
</tr>
<tr id="row-item-2" class="item_row" data-sorttable_row_key="2" data-sorttable_original="true" >
<td class="item1">Data 1</td>
<td class="item2">Data 2</td>
<td class="item3">Data 3</td>
</tr>
<tr id="row-item-2-1" class="item_row" data-sorttable_row_key="2" data-sorttable_original="false" >
<td colspan="3">
Details regarding Data 1,2,3
</td>
</tr>
<tr id="row-item-3" class="item_row" data-sorttable_row_key="3" data-sorttable_original="true" >
<td class="item1">Data 4</td>
<td class="item2">Data 5</td>
<td class="item3">Data 6</td>
</tr>
<tr id="row-item-3-1" class="item_row" data-sorttable_row_key="3" data-sorttable_original="false" >
<td colspan="3">
Details regarding Data 4,5,6
</td>
</tr>
</tbody>
</table>


Sortable Multiple Rows (jsfiddle) (it looks like it works because it can carry the linked row with the sort, but it doesn't because the sort is completely incorrect)

Sortable Multiple Rows (using single rows, doesn't work) (jsfiddle)

Pastebin for Sortable Code used in above JSFiddles

What is supported

<table id="data_table" class="sortable">
<colgroup>
<col clas="item1" />
<col class="item2" />
<col class="item3" />
</colgroup>
<thead>
<tr>
<th class="item1 sorttable_alpha">Item 1</th>
<th class="item2 sorttable_alpha">Item 2</th>
<th class="item3 sorttable_alpha">Item 3</th>
</tr>
</thead>
<tbody>
<tr id="row-item-0" class="item_row">
<td class="item1">Data 1</td>
<td class="item2">Data 2</td>
<td class="item3">Data 3</td>
</tr>
<tr id="row-item-1" class="item_row">
<td class="item1">Data 4</td>
<td class="item2">Data 5</td>
<td class="item3">Data 6</td>
</tr>
<tr id="row-item-2" class="item_row">
<td class="item1">Data 1</td>
<td class="item2">Data 2</td>
<td class="item3">Data 3</td>
</tr>
<tr id="row-item-3" class="item_row">
<td class="item1">Data 4</td>
<td class="item2">Data 5</td>
<td class="item3">Data 6</td>
</tr>
</tbody>
</table>


Sortable using the default code (jsfiddle)

Pastebin for above JsFiddle (contains slight modifications to original, for better ELEMENT support within
cells
).

Ideally what I'm looking for in the answer to this question is either:


  • library to do what I'm looking for,

  • solution to bug within my sorrtable.js modification.


Answer

You can avoid editing the sorttable.js script altogether.

Instead, create a click event on the table's thead, which moves the colspan rows into place after sorttable.js has sorted all the rows:

$('.sortable thead').click(function() {
  var sortable = $(this).closest('.sortable');

  sortable.find('tr:has(td[colspan])').each(function() {
    var key = $(this).data('sorttable_row_key'),
        link = sortable.find('tr:not(:has(td[colspan]))[data-sorttable_row_key=' + key + ']');

    $(this).insertAfter(link);
  });
});

I've used jQuery, since you linked to it in your Fiddle. If you prefer a vanilla JavaScript solution, let me know.

Working Fiddle

Comments