Update responsivePriority on sort

mattct

Hi,
Is there a way I can dynamically set the responsive priority on a sorted column?

Thanks

colin

Hi @mattct ,

You can do that by adding classes to the column's headers - see responsive.rebuild() which contains an example doing that.

Cheers,

Colin

mattct

@colin

Apologies for the late reply, but I've finally got around to looking at this.

I'm not sure class based is going to provide the right solution. I was hoping to be able to update responsive priority in column defs based on the sort/order, or set/remove data-priority attributes for each sort event.

    $('#dt_basic').on('order.dt', function () {
      var api = $(this).DataTable(),
      sort = api.order(),
      sortValue = sort[0][0];

      api.columns().every(function(c) {
        if(c == 0 || c == 1 || c == sortValue) {
          api.column(c).header().setAttribute('data-priority', 1);
        } else {
          api.column(c).header().removeAttribute('data-priority');
        }
      });
      
      api.responsive.rebuild();
      api.responsive.recalc();
    });

This kind of works, but I'm finding issues with applying this ordering does not update any previous responsive settings. On initial page load it may be that column 4 is prioritised. If I trigger the above to sort on column 9, the priority will be set to column 4 and the 9.

colin

Hi @mattct ,

One solution perhaps would be to have no priorities on the HTML, and just add them programmatically as you are above in the initComplete. That way they would also be added in a consistent way.

Cheers,

Colin

mattct

Hi @colin ,

Thanks for the nudge in the 'right' direction.

I've tried this on drawCallback, which seems to achieve the desired behaviour. How does this look rather than on initComplete?

        drawCallback: function(settings, json) {
          var api = $(this).DataTable(),
          sort = api.order(),
          sortValue = sort[0][0];

          api.columns().every(function(c) {
            if(c == 0 || c == 1 || c == sortValue) {
              settings.responsive.s.columns[c].priority = 1;
            } else {
              settings.responsive.s.columns[c].priority = 10000;

            }
          });
        },

I think I'm right in assuming I can remove the above $('#dt_basic').on('order.dt', function (){... function as drawCallback enables the same thing?

Thanks

colin

Hi @mattct ,

I've tried this on drawCallback, which seems to achieve the desired behaviour. How does this look rather than on initComplete?

drawCallback is called every time the table is drawn (paged, ordered or searched), initComplete is only called once when the data is loaded.

So, your code above looks right for your issue.

I think I'm right in assuming I can remove the above $('#dt_basic').on('order.dt', function (){... function as drawCallback enables the same thing?

Yep. The order.dt wouldn't have an effect if you paged or searched, so the drawCallback is the correct place to go there.

Cheers,

Colin