Djangoèu tables2和excelTableFilter覆盖标题V形

Question

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

django表2:https://github.com/jieter/django-tables2

excelTableFilter使HTML表格更易于搜索/筛选/排序，djangoèu tables2使您能够更好地控制表格的呈现方式。你知道吗

但是excelTableFilter中的filter按钮在移动设备上非常大，很难调整大小。我的目标是用excelTableFilter的弹出菜单替换djangoèu tables2的a-z，z-a排序默认值。你知道吗

经过2-3个小时的挖掘，我的解决方案是：

（我很想得到反馈/不太老套的解决方案）

Answer 1

JS公司：

首先，我将excelTableFilter应用于目标表：

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

接下来，我删除了所有图标标签：

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

然后我编写了一个函数来截获类“click\u redirect”上的所有点击，并将它们重定向到树中的“arrow down”类元素

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

---

希望这能节省你们所有人的时间！你知道吗