Как создать фильтрацию столбцов со скобками значений в таблице данных?

---

У меня есть столбец для процентного завершения в моей таблице, и у меня есть доступная фильтрация столбцов типа "select". Я хочу, чтобы мой выпадающий фильтр отображал статический список скобок (например, <20%, 20-60% и >60%). Таким образом, когда пользователь выбирает этот параметр фильтра, таблица данных отображает только эти строки.
Она мой код до сих пор:

 $(document).ready(function() {
  $('#OpptyTable').DataTable({
    "sDom":"ltipr" ,
    "pageLength": 25,    
    initComplete: function() {
      this.api().columns([1,2,3]).every(function() {
        var column = this;
        var select = $('<select><option value=""></option></select>')
          .appendTo($(column.footer()).empty())
          .on('change', function() {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );

            column
              .search(val ? '^' + val + '$' : '', true, false)
              .draw();
          });

        column.data().unique().sort().each(function(d, j) {
          select.append('<option >' + d + '</option>');
        });
      });

      this.api().columns([0]).every(function() {
        var that = this;
        var input = $('<input type="text" placeholder="Search" />')
          .appendTo($(this.footer()).empty())

          .on('keyup change', function() {
            if (that.search() !== this.value) {
              that
                .search(this.value)
                .draw();
            }
          });
      });
      var r = $('#OpptyTable tfoot .filterAvailable');
  r.find('th').each(function(){
    $(this).css('padding', 8);
  });
  $('#OpptyTable thead').prepend(r);
  $('#search_0').css('text-align', 'center');
    }
  });
});

Что я уже пробовал:

Код, упомянутый в описании проблемы

---