Listular/index.html at master · DynamicTyped/Listular · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<html ng-app='app'>
<head>
	<style>
		.filter { float:left; width: 300px; }
		.sort { margin-left:300px;}
		.sort ul { padding: 0px;}
		.sort li{
			list-style-type:none;
			max-width: 100px;
			display:inline;
			margin-left:10px;
			border-radius: 5px;
			padding:5px;
		}
		.sort .selected { background-color: #EDEDED;}
		.sort li.selected:after, .sort li.selected:before{
			padding-left:5px;
			font-family:sans-serif;
			font-size:12px;
		}
		.sort li.selected:after{
			content: '˄';
		}

		.sort li.selected.reverse:after{
			content: '˅';
		}


	</style>
	<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular-route.min.js"></script>
	<script src="src/listular.js"></script>
	<script type="text/javascript">
		var app = angular.module('app', ['listular']);

		app.controller('testCtrl', ['$scope', function($scope){
			$scope.listData = [
	      {name: 'Satya Nadella', company: 'Microsoft'},
	      {name:'Michael Dell', company: 'Dell'},
	      {name:'Mark Zuckerberg', company: 'Facebook'},
	      {name:'Mikael Ohlsson', company: 'IKEA'}];
		}]);
	</script>
	<script type="text/javascript">
	//we can pretend that this is the data that would be converted to json in our typical razor view.
	var listProperties = {
		data: [
	      {name: 'Satya Nadella', company: 'Microsoft'},
	      {name: 'Shantanu Narayen', company: "Adobe Systems"},
	      {name: 'Jeff Bezos', company: 'Amazon'},
	      {name: 'Rory Read', company: 'AMD'},
	      {name:'Steven Elop', company: 'Nokia'},
	      {name:'Alan Mulally', company: 'Ford'},
	      {name:'Tim Cook', company: 'Apple'},
	      {name:'Michael Dell', company: 'Dell'},
	      {name:'Mark Zuckerberg', company: 'Facebook'},
	      {name:'Mikael Ohlsson', company: 'IKEA'},
	      {name:'Paul Otellini', company: 'Intel'},
	      {name:'Mitchell Baker', company: 'Mozilla'},
	      {name:'Satoru Iwata', company: 'Nintendo'},
	      {name:'Larry Ellison', company: 'Oracle'},
	      {name:'Howard Schultz', company: 'Starbucks'},
	      {name:'Gabe Newell', company: 'Valve'},
	    ],
	     sortFields: ['name', 'company'],
	     templateUrl: "template/person.html",
	     showFilter: true,
	     showNextPrevious: true,
	     showPageSize: true
	};

	app.value('sortTemplate', {
	    template: '',
	    templateUrl: '"/template/sort.html"'
	});

	</script>
<body ng-controller="testCtrl">
	<div list properties="listProperties" templateurl="template/person.html" show-filter="true" show-next-previous="true" show-page-size="true"></div>
</body>
</html>