AngularJS: еще одна таблица с сортировкой, фильтрацией и постраничной навигацией

Что это?

Для чего?

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

Структура таблицы

<div id="testApp">
	
	<!-- Директива, внутри которой будет наша таблица -->
	<solo-table items-on-page = "10">
		<!-- Здесь данные для отображения в формате JSON, например -->		
		<div solo-table-data>
		[{
			"id": 1,
			"name": "Alvah Gleason",
			"address": "58707 Ophelia FieldEast Lorena, LA 89754-9301",
			"year": "1981"
		}, ......]       
		</div>
		
		<!-- Отображаем сколько есть страниц и на какой находимся -->
		<div>
			Page <[pager.currentPage]> of <[pager.foundPages]>. 
			Total items:  <[pager.found]>
		</div>

		<!-- Разметка таблицы -->
		<table class="table table-striped table-bordered" >
			<thead>
				<tr>				
					<th>Id</th>
					<th>Year</th>
					<th>Name</th>
					<th>Address</th>
				</tr>
			</thead>

			<!-- Рисуем строки с данными -->
			<tr ng-repeat="item in filtered = (original)" >
				<td><[item.id]></td>
				<td><[item.year]></td>
				<td><[item.name]></td>
				<td><[item.address]></td>
			</tr>

		</table>

		<!-- Постраничная навигация -->
		<div>
			<a href="" ng-click="gotoFirstPage()">First page | </a>
			<a href="" ng-click="gotoPrevPage()"> ←prev | </a>
			<a href="" ng-click="gotoNextPage()">next → | </a>
			<a href="" ng-click="gotoLastPage()">Last page </a>
		</div>
	</solo-table>
</div>
<script>
    // Здесь приведен код, упрощающий создание нового AngularJS приложения
    // Создаем приложение с именем example, вставляем его в элемент testApp,
    // добавляем в него таблицу и собственные фильтры
    AppFactory("testApp", "example", ["solo.table"]);

</script>

/**
 * Создание нового Angular приложения с заданными настройками.
 * Позволяет разместить на одной странице несколько приложений.
 *
 * @param elementId ID DOM-элемента, к которому прикрепляется приложение
 * @param appName Имя приложения (главного модуля)
 * @param modules Список модулей, подключаемых к приложению
 * @constructor
 */
var AppFactory = function(elementId, appName, modules)
{
	'use strict';

	if (!modules)
		modules = [];
	var el = document.getElementById(elementId);
	angular.module(appName, modules).config([

		/**
		 * Т.к. используется Smarty, то символы {{ и }} нужно заменить,
		 * например, на <[ и ]>
		 */
		"$interpolateProvider", function($interpolateProvider){
			$interpolateProvider.startSymbol('<[');
			$interpolateProvider.endSymbol(']>');
		}
	]);
	modules.push(appName);
	angular.bootstrap(el, modules);
};

Сортировка колонок

<solo-table items-on-page = "10" make-sortable>

<thead>
	<tr>
		<!-- У каждой колонки, которую мы хотим сортировать,
		нужно указать директиву sort-by='имя_поля' -->
		<th sort-by='id'>Id</th>
		<th sort-by='name'>Name</th>
		<th>Address</th>
	</tr>
</thead>

<solo-table items-on-page = "10" make-sortable="3">

<th sort-by='name' default-sort="asc">Name</th>

	
		.solo-table-sort-asc > .solo-column-arrow
		{
			position: relative;
			top: 10px;
			margin-left: 5px;
			border-color: black transparent;
			border-style: solid;
			border-width: 5px 5px 0px 5px;
			height: 0px;
			width: 0px;
		}
		.solo-table-sort-desc > .solo-column-arrow
		{
			position: relative;
			top: -10px;
			margin-left: 5px;
			border-color: black transparent;
			border-style: solid;
			border-width: 0px 5px 5px 5px;
			height: 0px;
			width: 0px;
		}

		.solo-table-column-cursor
		{
			cursor: pointer;
		}

Используем собственный фильтр

<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);
            };
    });
    // подключить модуль с фильтрами 
    AppFactory("testApp", "example", ["solo.table", "myFilters"]);

</script>

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

<tr ng-repeat="item in filtered = (original | filterByFields:filterModel:['name', 'address'])" >

В планах

• Больше примеров
• Сохранение параметров таблица в URL
• Возможность применения не только к таблицам, а спискам из любых DOM-элементов (UL>LI, div и пр.)
• ...

Что-то еще?