Блог

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

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

excelTableFilter делает HTML-таблицы более удобными для поиска / фильтрации / сортировки подобно Excel, django_tables2 дает вам больше контроля над тем, как отображается таблица.

НО кнопка фильтра в excelTableFilter очень большая на мобильных устройствах и едва заметна. Моей целью было заменить сортировку по умолчанию django_tables2 по алфавиту, z-a на всплывающее меню из excelTableFilter.

После 2-3 часов копания вот мое решение:

(Я хотел бы получить обратную связь / менее хакерские решения)

JS:

Сначала я применил excelTableFilter к моей целевой таблице:

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

Затем я удалил все теги значков:

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

Затем я написал функцию для перехвата всех нажатий на класс ‘click_redirect’ и перенаправления их на элемент класса ‘со стрелкой вниз’ в их дереве

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

Затем я применяю этот класс ко всем моим заголовкам и заменяю их URL сортировки на #

 <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:

Наконец, я применяю следующий css, чтобы скрыть значок

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

Надеюсь, это сэкономит вам всем немного времени!