0

I have data in a footable table. The first row (tr) has averages for each row underneath. Example:

| Name    | Number |
--------------------
| Average | 4.5    |
| Jim     | 5.0    |
| Sam     | 4.0    |

The average row shouldn't be sorted, is there a class or attribute to prevent the average value from being sorted?

Allyl Isocyanate
  • 13,306
  • 17
  • 79
  • 130
  • I haven't tried this -- just thinking out loud: Have you tried using the add/remove rows feature to first remove the Average row -- then do the sort -- then add the Average row back in? – Bangkokian Feb 10 '15 at 19:43
  • My bet would be on putting the first row in the `` of your table – Bergi Feb 10 '15 at 19:50
  • @Bangkokian I'm using the standard footable sort plugin, don't believe there is a before sort / after sort hook that would allow this. – Allyl Isocyanate Feb 10 '15 at 20:16
  • @Bergi adding an additional row in thead (the column headers + the average row) breaks sorting (sort icons no longer show up) – Allyl Isocyanate Feb 10 '15 at 20:18

1 Answers1

2

Because the default sort plugin does not support per row settings, you will need to hack your logic in, using custom sorter and custom marker.

$('table').footable({
   sorters : {
      alpha : function mysorter ( a, b ) {
         if ( ! mysorter.top ) {
            mysorter.top = $('table .footable-sorted-desc').length ? 1 : -1;
            setTimeout( function(){ mysorter.top = 0; }, 0 );
         }
         if ( a.indexOf( '\u2063' ) >= 0 ) return mysorter.top;
         if ( b.indexOf( '\u2063' ) >= 0 ) return -mysorter.top;
         return a > b ? 1 : ( a < b ? -1 : 0 );
      }
   }
});
<link href="http://fooplugins.com/footable/css/footable.core.min.css" rel="stylesheet"/>
<link href="http://fooplugins.com/footable/css/footable.metro.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://fooplugins.com/footable/js/footable.js"></script>
<script src="http://fooplugins.com/footable/js/footable.sort.js"></script>

<table><thead><tr><th>Name<th data-sort-initial="true">Number</thead><tbody>
<tr><td>Average<td>4.5&#x2063;</tr>
<tr><td>Jim<td>5.0</tr>
<tr><td>Sam<td>4.0</table>

Here I am using the Invisible Separator \u2063 to mark the 'top' content.

A few extra lines are used to optimally detect sorting direction and adjust the result accordingly (smallest when ascending, largest when descending).

Sheepy
  • 17,324
  • 4
  • 45
  • 69
  • I "solved" this by adding the tr outside of tbody and thead, which works but is rather ugly. I like this method better, thanks @Sheepy...consider making a pull request to footable – Allyl Isocyanate Feb 11 '15 at 20:33
  • @juwiley Thanks. There may be other good (better) answers for your questions later, so usually it's good habit to delay accepting the answer for a bounty question for at least a day or two. But I'm glad to have helped you nonetheless. :) – Sheepy Feb 12 '15 at 02:17