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

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

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

$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 функция была взята с /questions/24254404/jquery-datatables-filtrovat-stolbets-po-tochnomu-sootvetstviyu/24254415#24254415.

Little Edit: я пометил столбец как строку типа поиска:

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

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

Источник

2 ответа

Решение

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

Я полагаю, у вас есть столбцы с содержанием, как <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 значок.

Источник

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

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

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

Желаемая функциональность показана здесь: http://plnkr.co/edit/PRu8bZI0vO1ocgvjW9oA?p=preview

Источник
Другие вопросы по тегам