CODEWITHSUNDEEP
jquerydatatables
Carlos Cardenas
Carlos Cardenas

Reputation: 119

Keep position for a row when sorting

In my table (JQuery Datatables), there's a row (the last one) which always must be at the end (it is for totals).

I can distinguish its values because they are like:

<td><span class="last-row">MY VALUE</span></td>

How can I can make the sorting functions to always put this kind of row at the end, no matter which column is being ordered by, and no matter if the sorting is ASC or DESC?

Upvotes: 2

Views: 1688

Answers (2)

Jay Rizzi
Jay Rizzi

Reputation: 4304

Yes

If it must be a td element then you will have to create a custom function sorting plugin http://www.datatables.net/plug-ins/sorting

Heres an example of a sort plugin that always puts null fields at the bottom, you can adjust to look for your special value in the column with whatever type of sort it is by subbing out nbsp; for your val, and assign this in aoColums stype

jQuery.fn.dataTableExt.oSort['mystring-asc'] = function(x,y) {
var retVal;
x = $.trim(x);
y = $.trim(y);

if (x==y) retVal= 0;
else if (x == "" || x == "&nbsp;") retVal=  1;
else if (y == "" || y == "&nbsp;") retVal=  -1;
else if (x > y) retVal=  1;
else retVal = -1;  // <- this was missing in version 1

return retVal;
 }
jQuery.fn.dataTableExt.oSort['mystring-desc'] = function(y,x) {
var retVal;
x = $.trim(x);
y = $.trim(y);

if (x==y) retVal= 0; 
else if (x == "" || x == "&nbsp;") retVal=  -1;
else if (y == "" || y == "&nbsp;") retVal=  1;
else if (x > y) retVal=  1;
else retVal = -1; // <- this was missing in version 1

return retVal;

 }

The assignment in datatable() function

 ...
 "aoColumns": [
  { "sType": 'mystring' },
 ...

Upvotes: 0

Jason
Jason

Reputation: 15931

just to flesh out what SiGanteng suggests, you can use the element tfoot to define footer rows in your table.

<table>
    <thead>
      <tr> 
      <!-- modern browsers know how to render these, it is also used by screen readers and other assistive technologies -->
        <td>header 1</td>
        <td>header 2</td>
        <td>header 3</td>
      </tr>
    </thead>
    <tfoot> <!--ditto-->
      <tr>
        <td colspan="3">footer text</td>
      </tr>
    </tfoot>
    <tbody>
      <!-- regular html rows & cols here -->
    </tbody>
</table>

Upvotes: 3

Related Questions