Angular-DataTables - поиск определенного значения html-класса

Я хотел бы отфильтровать таблицу с данными по имени класса атрибута. Вот какое-то изображение. Идея состоит в том, чтобы щелкнуть значок звездочки рядом с заголовком таблицы, чтобы отобразить только избранные записи.

введите описание изображения здесь

Я уже пробовал несколько вариантов, как этого добиться, но это не работает. Как я понял, мне нужно определить какой-нибудь keyup-listener для значка звездочки в шапке. Вот код, который я использовал сейчас:

$scope.dtInstanceCallback = function (dtInstance) {
                var table = dtInstance.DataTable;

                // Apply the search
                table.columns().eq(0).each(function (colIdx) {
                    if ($('i', table.column(colIdx).header())[0] != undefined) {
                        $('i', table.column(colIdx).header()).on('keyup', function () {
                            if ($scope.showFavorites) {
                                table
                                    .column(colIdx)
                                    .search('fa-star', false, false, true)
                                    .draw();
                            } else {
                                //here drop the search by the star value drop search
                            }
                        });
                    }
                });
            };

$scope.showFavorites - это просто переменная, содержащая true или false. Я переключаю его значение, когда ng-click значок звездочки. Первоначально он инициализируется с помощью false:

$scope.showFavoriteOnly = function () {
                $scope.showFavorites = !$scope.showFavorites;


            };

Небольшая проблема - не использовать интеллектуальный поиск, потому что оба значка (полная звездочка и пустая звездочка) различаются только буквой: fa-star и fa-star-o.

Функция .search была взята из https://stackoverflow.com/a/23931504/3402092.

Небольшое изменение: я пометил столбец как строку типа поиска:

DTColumnDefBuilder.newColumnDef(0).withOption('orderDataType', 'fa-classes').withOption('sType', 'string')

Таким образом, я могу использовать поисковый запрос, чтобы найти fa-star-o.


angularjs datatables angular-datatables
person N.Zukowski    schedule 25.06.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

У меня такое чувство, что вы действительно ищете настраиваемый фильтр . Пользовательский фильтр - это настраиваемый поиск / фильтр, который может быть динамическим (как обычный поиск) или постоянным, что означает, что последующие поиски будут подмножеством этого настраиваемого фильтра, пока он не будет удален.

Я предполагаю, что у вас есть столбцы с содержанием типа <i class="fa fa-star-o"></i> в первом столбце. Вы можете реализовать два настраиваемых фильтра, которые отфильтровывают строки с fa-star / fa-star-o следующим образом:

$scope.starFilter = function() {
  $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {         
      return $(data[0]).hasClass('fa-star')
    }    
  )
  $scope.dtInstance.DataTable.draw()
  $.fn.dataTable.ext.search.pop() //remove this line to make the filter persistent
}

$scope.starOFilter = function() {
  $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {         
      return $(data[0]).hasClass('fa-star-o')
    }    
  )
  $scope.dtInstance.DataTable.draw()
  $.fn.dataTable.ext.search.pop() //remove this line to make the filter persistent
}

Здесь вызывается нажатием кнопки

<button ng-click="starFilter()">star filter</button>

демонстрация -> http://plnkr.co/edit/hUSZ0XpRDZPjERsr0vF5?p=preview

Очень большое преимущество этого подхода в том, что вы можете сделать фильтр постоянным. Если вы не pop() фильтр, тогда последующий поиск будет подмножеством самого подмножества фильтров, например, в «избранном», все строки со значком fa-star.

person davidkonrad    schedule 25.06.2016
comment
@Sirion, Спасибо, что приняли ответ! Это был долгий снимок с настраиваемым фильтром, но я думаю, он вам понравится больше. Я часто использую его, например, для фильтрации строк между диапазоном дат, а затем пользователь может выполнять поиск в этом диапазоне или при фильтрации определенных типов строк. - person davidkonrad; 25.06.2016
comment
ваши решения работают, но не в моем случае. Я загружаю значки из БД как html, и когда я проверяю data, столбец со значком представляет собой большую пустую строку. Поэтому я решил получить доступ к колонке другим способом. Но почему-то я не могу объединить фильтрацию и сортировку. Я создал плункер из своего чемодана, не могли бы вы взглянуть на него? plnkr.co/edit/PRu8bZI0vO1ocgvjW9oA?p=preview. Почему-то эта простая функциональность уже заняла у меня много времени. - person N.Zukowski; 26.06.2016
comment
@ Сирион, можно подождать до завтра? Здесь, в ДК, 03.16, и я употребляю алкоголь (в ДК летом). Я займусь этим завтра (воскресенье) - person davidkonrad; 26.06.2016
comment
Это вообще не проблема. - person N.Zukowski; 26.06.2016
comment
Хорошо, теперь я заставил это работать. Я обновляю плункер, если вы хотите взглянуть на него: plnkr.co/edit/ PRu8bZI0vO1ocgvjW9oA? P = превью. P. S. jQuery - это беспорядок. - person N.Zukowski; 26.06.2016

arrow_upward
1
arrow_downward

В моем случае данные [индекс] были пустыми (действительно не знаю почему). Но мне удалось заставить его работать со следующей функцией:

$.fn.dataTable.ext.search.push(
   function (settings, data, index, rowData, counter) {
      return $(rowData[0]).hasClass('fa-star');
   }
);

Я заменил data на rowData и смог получить доступ к html-объекту.

Здесь показаны желаемые функции: plnkr.co/edit/PRu8bZI0vO1ocgvjW9oA?p=preview

person N.Zukowski    schedule 26.06.2016
comment
Выглядит великолепно, и, как пользователь, вы интуитивно чувствуете, что можете фильтровать, щелкнув значок ★. - person davidkonrad; 28.06.2016