Footable sorting with colspan rows

Question

I have a sorting issue when using rows with colspans when sorting a Footable table.

My table structure:

<table class="table footable">
 <thead>
  <tr>
   <th>Name</th>
   <th data-type="numeric">Date of Birth</th>
   <th>Country</th>
  </tr>
 <thead>
 <tbody>
  <tr>
   <td>Bill Smith</td>
   <td data-value="315532800">1/1/1980</td>
   <td>England</td>
  </tr>
  <tr>
   <td colspan="3">Some long description of Bill<td>
  </tr>
  
  <!-- Many, many other rows -->
 </tbody>
</table>

I have a checkbox to toggle the colspan rows on/off, but if they're displayed and you sort by a column, all the colspan rows are grouped together.

JSFiddle demo

Is there a way to sort that correctly places the colspan (description) row beneath the correct data row?

Could you provide a plunk or jsfiddle that demonstrates the issue? — Jeff, Oct 14 '14 at 15:35
@Jeff - added JSFiddle demo - sorting by any column make the description rows group together instead of staying "attached" to their corresponding data row — SteB, Oct 14 '14 at 16:02
I'm thinking about a solution. The problem is the description is on a separate row so there is no way to keep it related to the row above it. I'm not sure how yet, but the solution is probably to move the description row in to the row above it. — Jeff, Oct 14 '14 at 17:30
@Jeff - [DataTables plugin demo](http://www.datatables.net/examples/api/row_details.html), this appears to do this (no idea how), I'll have a look at converting my table(s) to use this plugin where this functionality is important — SteB, Oct 15 '14 at 08:45
My answer below will work for Footable, but you've peaked my interest in DataTables. I looked at it a long time ago and decided not to use it. Now I'm going to have to review it again and see if I should replace Footable with DataTable in my project. Thanks for the reminder... — Jeff, Oct 15 '14 at 16:53

score 1 · Accepted Answer · answered Oct 20 '14 at 07:34

I've managed to solve this with Javascript (using jQuery).

Basically I'm hiding the "description" rows by default (in CSS), I have a checkbox to toggle their visibility.

My javascript hooks into Footable's sorted (after sorting) event and basically moves the description rows around so they're always below the "data" row.

$('#details').footable().bind({
    'footable_sorted': function(e) {
        var rows = $('#details tbody tr.data');

        rows.each(function()
        {
            var personid = $(this).data('row-person');

            var detail = $('#details tbody tr.descriptions[data-detail-person="'+ personid +'"]');
            $(detail).insertAfter($(this));
        });
    }
});

I also had to add additional markup to my table (classes/ids) to enable this.

See my Fiddler demo for full details.

Tested with up to 370 rows and gives acceptable performance.
I'm sure my HTML/JS could be stream-lined further.

This still works with Version 3 of footable! Just use event 'after.ft.sorting' instead of 'footable_sorted': $("#client_targets_footable").footable({ "on": { 'after.ft.sorting': function (e) { [...] } } }); — Ralf Jahr, Feb 06 '19 at 17:22

score 0 · Answer 2 · answered Oct 15 '14 at 16:49

So the root of the problem is that the description row is a separate row and is not "linked" with the data row above it. The only way a user would know what data row the description row belongs to is the order of the rows. Once you sort the table, the order changes and you can no longer count on the order to link the data and description rows. (Wow that's kind of hard to read. My apologies in advance...)

So, one way to solve this is to have the data and description rows both contained in the same row.

<table>
    <thead>
      <tr>
        <th>Name</th>
        <th data-type="numeric">Date of Birth</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <table>
            <tr>
              <td>Bill Smith</td>
              <td data-value="315532800">1/1/1980</td>
              <td>England</td>
            </tr>
            <tr>
              <td colspan="3">Some long description of Bill</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table>
            <tr>
              <td>John Smith</td>
              <td data-value="315532800">1/1/1980</td>
              <td>France</td>
            </tr>
            <tr>
              <td colspan="3">Some long description of John</td>
            </tr>
          </table>
        </td>
      </tr>
    </tbody>
  </table>

Here's a plunk that shows this in action: http://plnkr.co/edit/NvmUgzvaAix1x7WUGYSM

Thanks for the help but I'm not too keen on nested tables. Reading through the DataTables JS give me an idea and I've managed to get it working - see my answer for details. — SteB, Oct 20 '14 at 07:22

score 0 · Answer 3 · answered Jun 20 '17 at 05:58

0

This is a fix for rows with colspan: $('table.footable').find('td[colspan]').siblings().remove();

answered Jun 20 '17 at 05:58

afnet

21
3

Footable sorting with colspan rows

3 Answers3