Skip to content

Instantly share code, notes, and snippets.

@YannBrrd

YannBrrd/app.js

Last active December 17, 2015 06:49
Show Gist options
  • Save YannBrrd/5568272 to your computer and use it in GitHub Desktop.
Save YannBrrd/5568272 to your computer and use it in GitHub Desktop.
Download ZIP
Pagination using ElasticJS
Raw
app.js
// app.js
angular.module('cs_demo', [
'controllers',
'elasticjs.service',
'ui.bootstrap'
]);
Raw
controller.js
// controllers.js
angular.module('controllers', [])
.controller('CSProjectCtrl', function($scope, ejsResource) {
var ejs = ejsResource('http://localhost:9200');
$scope.Math = window.Math;
$scope.noOfPages = 1;
$scope.currentPage = 1;
$scope.maxSize = 5;
$scope.search = function(pageNum) {
if($scope.ssnumber == null)
return;
$scope.currentPage = pageNum;
var oQuery = ejs.BoolQuery().must(ejs.TermQuery("cliName", $scope.cliname));
var mysearches = ejs.Request()
.indices('myindex')
.types('mytype')
.from(($scope.currentPage - 1) * 10);
$scope.results = mysearches
.query(oQuery.must((ejs.QueryStringQuery($scope.queryTerm || '*'))))
.doSearch();
};
$scope.$watch('currentPage', function() {
$scope.search($scope.currentPage);
});
});
Raw
index.html
<!DOCTYPE html>
<html ng-app="cs_demo">
<head>
<link rel="stylesheet" href="common/css/bootstrap.min.css">
<link href="common/css/bootstrap-responsive.css" rel="stylesheet">
<link href="common/css/bootstrap-combobox.css" media="screen" rel="stylesheet" type="text/css">
<link href="common/css/dangle.css" media="screen" rel="stylesheet" type="text/css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- project dependency libs -->
<script src="common/lib/jquery.js"></script>
<script src="common/lib/angular.min.js"></script>
<script src="common/lib/elastic.min.js"></script>
<script src="common/lib/elastic-angular-client.min.js"></script>
<script src="common/lib/ui-bootstrap-tpls-0.2.0.min.js"></script>
<!-- project specific files -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="CSProjectCtrl">
<div class="masthead">
<h3 class="muted">My data</h3>
</div>
<div class="container-fluid" >
<div class="span5 offset1" id="cliSearchSearch" ><!-- ssnumber -->
<form class="form-inline">
<input type="text" class="input-large search-query" placeholder="client ID..." ng-model="cliname" >&nbsp;&nbsp;<button type="submit" ng-click="search(1)" class="btn">Filtrer</button>
</form>
</div>
<div class="span5 offset1" style="float:left">
<h3>ID</h3>
<span ng-repeat="doc in results.hits.hits">
<span ng-show="$first">
Name : {{doc._source.clientName}}<br/>
Data count : {{results.hits.total}}<br/>
</span>
</span>
</div>
</div>
<hr />
<div class="container-fluid">
<div class="row-fluid">
<div class="span12 pagination-centered" id="eventSearch"><!-- event search -->
<form class="form-inline">
<input type="text" class="input-large search-query" placeholder="Search" ng-model="queryTerm" >&nbsp;&nbsp;<button type="submit" ng-click="search(1)" class="btn">My data</button>
</form>
<table class="table table-bordered table-striped table-condensed">
<thead>
<tr>
<th>Client ID</th>
<th>Payment</th>
<th>Type</th>
<th>Date</th>
<th>Value</th>
<th>Real value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="doc in results.hits.hits">
<td>{{doc._source.cliname}}</td>
<td>{{doc._source.payment}}</td>
<td>{{doc._source.type}}</td>
<td>{{doc._source.value}}</td>
<td>{{doc._source.realvalue}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div align="center">
<pagination num-pages="Math.floor(results.hits.total / 10 - 0.1) + 1" current-page="currentPage" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></pagination>
</div>
</div>
</div>
</body>
</html>
@leehas
Copy link

leehas commented Mar 23, 2015

How do we resolved Cross-Domain Access error?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment