Sort based on a value outside of the table

gelinas

I have a table that describes features on a river and tells the minimum/maximum water level these features are available at ( https://potomac.surf/ ). I'd like to sort the table based on the current water level of the river, so that when you click MIN/MAX it sorts to what's in (water level is between min/max), too low (level is below min), too high (level above max).

Maybe change background color of that row as well to graphically show what features are in.

Essentially trying to recreate the behavior of this table: https://web.archive.org/web/20190313035916/http://www.dckayak.com/potomac-river-playspots

Any way to accomplish this?

kthorngren

Yes, you can do this. Here is a simplistic example of what you describe.
http://live.datatables.net/pepepoyi/1/edit

It uses rowCallback to highlight the cells based on the input value. It uses sliders for the min/max values but you can use whatever you like. This is Datatables independent. The slider event simply calls draw() to draw the table which executes the rowCallback function.

Let us know if you have further questions.

Kevin

gelinas

I'm not sure if this really answers my question or not, given it is more about sorting than the adding of color, but I think it might also give a very simple way to solve my sorting issue too.

So while using rowCallback to give some cells color based on values around the current water level I also used it to add a data-order based on that color to give me a good enough sorting of what is within a reasonable level or not, however it doesn't seem like data-order is having any affect when added this way.

rowCallback: function( row, data ) {
  if ( Number(data[2]) <= waterHeight && Number(data[4]) >= waterHeight ) {
    $('td:eq(2)', row).addClass('table-success');
    $('td:eq(2)', row).attr('data-order',100);
    $('td:eq(3)', row).addClass('table-success');
    $('td:eq(3)', row).attr('data-order',100);
  } else if ( Number(data[2]) > waterHeight ) {
    $('td:eq(2)', row).addClass('table-danger');
    $('td:eq(2)', row).attr('data-order',200);
    $('td:eq(3)', row).addClass('table-danger');
    $('td:eq(3)', row).attr('data-order',200);
  } else {
    $('td:eq(2)', row).addClass('table-primary');
    $('td:eq(2)', row).attr('data-order',300);
    $('td:eq(3)', row).addClass('table-primary');
    $('td:eq(3)', row).attr('data-order',300);
  }
},

kthorngren

Without knowing the specifics of your data its hard to address how to sort it. My example was more to show that Datatables could provide a similar output.

I don't think using HTML5 data attributes this way will work. I would use columns.render as described in the Otrhogonal Data docs for the sort operation. If you need help with this please update my test case or create your own with examples of your data.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

You can do something similar with setting 100, 200, 300 based on the data values. You can it more precise if you want to sort on values within the color range.

Kevin

gelinas

Thanks for pointing me in the right directions. Assigning values for sorting in the columnDefs, works out great.

render: {
  sort: function (data, type, full, meta) {
    if ( Number(full[2]) <= waterHeight && Number(full[4]) >= waterHeight ) {
      data = 100;
    } else if ( Number(full[2]) > waterHeight ) {
      data = 300;
    } else if ( Number(full[4]) < waterHeight ) {
      data = 200;
    }
      return data;
    }
}