как настроить стиль angular-datatables

Я новичок в angular, пытаюсь использовать библиотеку angular-datatables http://l-lin.github.io/angular-datatables/#/angularWay, но не знаю, как управлять стилем таблицы, потому что все они являются угловыми директивами, возможно ли, что я могу коснуться элементов HTML внутри ? как в примере ниже, как я могу удалить текст рядом с окном поиска? Также я прочитал API, не мог найти, как скрыть datatables_info на кнопке.

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

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

Обновить

возможно, я могу скрыть их с помощью CSS, но кажется, что невозможно добавить заполнитель к элементу ввода


angularjs angular-datatables
person vincentf    schedule 02.02.2016    source источник

Ответы (1)


arrow_upward
11
arrow_downward

Текст окна поиска

Вы можете сделать это разными способами, в том числе манипулируя внедренными элементами DOM, но «правильным» способом будет изменение язык настройки. Литерал языкового объекта по умолчанию:

var lang = {
    "decimal":        "",
    "emptyTable":     "No data available in table",
    "info":           "Showing _START_ to _END_ of _TOTAL_ entries",
    "infoEmpty":      "Showing 0 to 0 of 0 entries",
    "infoFiltered":   "(filtered from _MAX_ total entries)",
    "infoPostFix":    "",
    "thousands":      ",",
    "lengthMenu":     "Show _MENU_ entries",
    "loadingRecords": "Loading...",
    "processing":     "Processing...",
    "search":         "Search:",
    "zeroRecords":    "No matching records found",
    "paginate": {
        "first":      "First",
        "last":       "Last",
        "next":       "Next",
        "previous":   "Previous"
    },
    "aria": {
        "sortAscending":  ": activate to sort column ascending",
        "sortDescending": ": activate to sort column descending"
    }
}

Измените search на "" и включите lang в качестве опции language:

.withOption('language', lang)

Скрыть datatables_info внизу

Вы можете полностью отключить сводку информации о таблице, убрав флаг i из dom вариант. Параметр dom по умолчанию равен lfrtip, поэтому просто

.withDOM('lfrtp')

Посмотреть оба решения в действии можно здесь -> http://plnkr.co/edit/3WqPj1IW1h3zK37hF4dv?p=preview

добавить заполнитель к элементу ввода

Введенное поле поиска находится по адресу .dataTables_filter input. Вы можете использовать angular.element() или document.querySelector() для управления такими элементами DOM. Чтобы добавить заполнитель в поле поиска

.withOption('initComplete', function() {
   angular.element('.dataTables_filter input').attr('placeholder', 'Search ...');
})

добавьте ng-bind или ng-нажмите на кнопку «предыдущая» и «следующая»

Это очень сложно. Внедренные элементы не имеют ничего общего с angular - я считаю, что можно каким-то образом добавить ng-click к элементу, а затем (повторно)$compile. Однако кнопки разбивки на страницы воссоздаются каждый раз, когда таблица перерисовывается, поэтому угловое преобразование должно происходить снова и снова. Но вы можете легко упростить события для кнопок «предыдущий/следующий» без директив std angular:

.withOption('drawCallback', function() {
   angular.element('.paginate_button.previous').on('click', function() { alert('prev')} )
   angular.element('.paginate_button.next').on('click', function() { alert('next')} )             
})

Существует также событие page.dt, которое срабатывает при изменении активной страницы:

angular.element('body').on('page.dt', function(e, api) {
   console.log('Page #'+(api._iDisplayStart / api._iDisplayLength + 1) +' shown') ;
})
person davidkonrad    schedule 02.02.2016
comment
могу ли я задать другой вопрос, как мне манипулировать внедренными элементами DOM, например, если я хочу добавить ng-bind или ng-click на кнопку «предыдущий» и «следующий» - person vincentf; 03.02.2016
comment
Мне это реально пригодилось, пытаюсь таким способом добавить элемент внутрь таблицы, angular.element('.previous').after('<a>test</a>'); работает, но при переходе на другую страницу таблицы добавленный элемент пропадает. Можно поинтересоваться в чем причина и как исправить? - person vincentf; 04.02.2016
comment
@VincentFu, Да, как было сказано выше, кнопки разбиения на страницы воссоздаются каждый раз, когда таблица перерисовывается, поэтому, если вы хотите вставлять элементы таким образом, вы должны сделать это в drawCallback(). - person davidkonrad; 04.02.2016