The Angular-PagingTable directive

HTML / AngularJS Code

Output

<!doctype html>
<html>
	<style type="text/css">
		table.ev-table { width:100%; }
		table tr th { padding:15px 40px; background:#888; color:#fff;}
		table tr td { padding: 10px 100px; } 
		[ev-sort] { cursor:pointer; }
		ul.ev-paging { overflow:hidden; }
		ul.ev-paging li { float:left; padding:15px; margin:2px collor:#888; cursor:pointer;}
		ul.ev-paging li:hover { background:#888;}
		li.ev-current-page { background:#5279a4; color:#fff; }
	</style>
</head>
<body>

</div>

var APP = angular.module('app', ['evTable']);

APP.controller('TableController', ['evTableParams', function (evTableParams) {

var vm = this;

var fakeData = [{
				name : 'John',
				age  : 50
			}, {
				name : 'Jane',
				age  : 14
			},
			{
				name : 'Ted',
				age  : 35
			}, {
				name : 'Xander',
				age  : 38
			},
			{
				name : 'Test',
				age  : 25
			}, {
				name : 'Bob',
				age  : 35
			},
			{
				name : 'Monday',
				age  : 15
			}, {
				name : 'Lilly',
				age  : 16
			},
			{
				name : 'Rachel',
				age  : 32
			}, {
				name : 'Mark',
				age  : 66
			},
			{
				name : 'Bundy',
				age  : 69
			}, {
				name : 'Loopy',
				age  : 55
			}];

// client side static data demo

vm.clientSideTableData = new evTableParams({

data : fakeData, // < that's it!

// [Optional] Here for demo purposes

pageSize : 5,
				pageSizeOptions : [5, 10, 20]
			});

// server side paging

/*
			vm.serverSideTableData = new evTableParams({

serverPaging : true,
				ajaxUrl.     : '' //

});
			*/

}]);

</script>

</body>
</html>

Name	Age
{{ item.name }}	{{ item.age }}