Solo-angular-table

Что это?

AngularJS таблица (список) с сортировкой, фильтрами и постраничной навигацией.

Какие цели преследовались?

• Мы хотим разрабатывать прототип приложения быстро, нет времени на разработку серверной версии таблицы (списка) с сортировкой, фильтрами и постраничной навигацией. Поэтому, все данные таблицы находятся на клиенте, нет необходимости обращаться к серверу.
• Верстальщик не обязан знать AngularJS
• Верстка таблицы должна максимально соответствовать обычному HTML, а не быть нагромождением директив.
• Не ограничивать использование других Angular директив в разметке.
• "Живой" поиск по списку, когда записи фильтруются по мере набора искомого текста.
• Возможность фильтровать не по всем колонкам, а по выборочным.
• Возможность написать свой фильтр.
• Нужна возможность постраничной навигации.
• Сортировка колонок.
• Свобода в изменении HTML-кода таблицы, и вообще кода, связанного с таблицей.

Требования

Работает с версией AngularJS 1.1.5 и выше.

Примеры

• Пример #1: Простая таблица с постраничной навигацией
• Пример #2: Таблица с постраничной навигацией и сортировкой колонок. Сортировка ASC и DESC.
• Пример #3: Таблица с постраничной навигацией, сортировкой колонок и живым фильтром по всем колонкам.
• Пример #4: Таблица с постраничной навигацией, сортировкой колонок, фильтром в виде выпадающего списка, живым фильтром определенным колонкам.
• Пример #5: В этом примере можно увидеть использование собственного фильтра.
• Пример #6: Пример таблицы с большими данными (10000 записей). Фильтр по выборочным полям и фильтр в виде выпадающего списка.
• Пример #7: Таблица с колонкой, для которой определено направление сортировки по-умолчанию.
• Пример #8: Таблица с возможностю сортировки по 3-м направлениям DEFAULT, ASC и DESC.
• Пример #9: Пример с динамическим изменением числа записей на странице.
• Пример #10: Список можно реализовать не только с применением table, но и любым другим способом

Что-то еще?

Да. Это все работает с версией AngularJS 1.1.5 и выше. И с русским текстом тоже работает.

В коде используется синтаксис связывания <[ ]> вместо {{ }}. Мы используем Smarty в своих проектах и чтобы избежать конфликтов, пришлось внести некоторые изменения в конфигурацию приложения. Впрочем, вы вольны изменить или вообще не использовать AppFactory и применять родной синтаксис Angular.

Использование своего фильтра

<script>

    // Создаем модуль с фильтрами
    angular.module("myFilters", [])

        // Показывать только те записи, которые имеют поле year старше заданного
        .filter("older", function(){
            return function(items, search){

                if (!search)
                    return items;

                search = parseInt(search);

                var test = function(el, idx, array){
                    return el.year > search;
                };

                return items.filter(test);
            };
    });

    // Здесь приведен код, упрощающий создание нового AngularJS приложения
    // Создаем приложение с именем example01, вставляем его в элемент testApp,
    // добавляем в него таблицу и собственные фильтры
    AppFactory("testApp", "example05", ["solo.table", "myFilters"]);

</script>

<tr ng-repeat="item in filtered = (original | older:filterModel)" >

Постраничная навигация

Добавьте этот или похожий HTML-код в любое место между тегами solo-table для отображения ссылок перехода по страницам вашей таблицы.

<div>
	<a href="" ng-click="gotoFirstPage()">First page | </a>
	<a href="" ng-click="gotoPrevPage()"> &larr;prev | </a>
	<a href="" ng-click="gotoNextPage()">next &rarr; | </a>
	<a href="" ng-click="gotoLastPage()">Last page </a>
</div>