django_tables2 & excelTableFilter overwrite header chevron

Question

excelTableFilter: https://www.jqueryscript.net/table/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin.html

django_tables2: https://github.com/jieter/django-tables2

excelTableFilter makes HTML tables more search/filter/sortable like excel, django_tables2 gives you more control over how a table is rendered.

BUT the filter button in excelTableFilter is very large on mobile and hardly sizable. My goal was to replace the a-z, z-a sortng default of django_tables2 with the pop-up menu from excelTableFilter.

After 2-3 hours of digging through here was my solution:

(I'd love to get feedback / less hacky solutions)

Answer 1

JS:

First I applied excelTableFilter to my target table:

<script>
  $('#workorder_table').excelTableFilter();
</script>

Next I removed all of the icon tags:

<script>
  $('.glyphicon').removeClass('glyphicon-arrow-down')
  $('.glyphicon').removeClass('dropdown-filter-icon')
  $('.glyphicon').addClass('glyphicon-filter');
</script>

Then I wrote a function to intercept all of the clicks on class 'click_redirect' and redirect them to the 'arrow-down' class element in their tree

<script>
  $(document).on('click', '.click_redirect', function(event) {
    event.stopPropagation();
    $(event.target).parent().find('.arrow-down')[0].click();
  });
</script>

Next, I apply that class to all of my headers and replace their sorting url with #

<script>
  function update_djheaders(param) {
    param.setAttribute("class", "click_redirect");
    param.setAttribute("href", "#");
  };

  $.each($("th.orderable a"), function(i,l) {update_djheaders(l)});
</script>

---

CSS:

Lastly, I apply the following css to hide the icon

<style>
  .arrow-down {
    display:none !important;
  }
</style>

---

Hope this saves you all some time!