Instalando o ng-table
ng-table é um módulo AngularJS que habilita tabelas HTML com funções de paginação, filtro e classificação.
Códigos adicionados para configurar a tabela ng
[bower.json] "ng-table": "0.3.1"
[app.js] angular.module('myApp', ['ngTable']);
[index.html] <script src="/bower_components/ng-table/ng-table.js"></script>
Declarar uma tabela HTML habilitada para ng-table
<table ng-table="usersTableParams" show-filter="true">
<tbody>
<tr ng-repeat="user in **$data**">
<td data-title="'Name'" filter="{ 'full_name': 'text' }" sortable="'full_name'">
{{user.full_name}}
</td>
<td data-title="'Email'" filter="{ 'email': 'text' }" sortable="'email'">
{{user.email}}
</td>
</tr>
</tbody>
</table>
Alimente os dados do controlador para a mesa
.controller('UsersTableCtrl',
function ($scope, $log, ngTableParams, Users) {
$scope.fetchUsers = function() {
if (!$scope.usersTableParams) {
$scope.usersTableParams.reload();
return;
}
$scope.usersTableParams = new ngTableParams({
page: 1,
count: count
}, {
total: 0,
getData: function($defer, params) {
// prepare options to be sent to Rails
var queryOptions = {
page: params.page(),
page_size: params.count()
}
// params.filter() - array of key-value filters declared in view
queryOptions.search = params.filter()
// tableParams.orderBy() - an array of string indicating both the sorting column and direction (e.g. ["+name", "-email"])
if (tableParams.sorting()) {
// only interested in first sort column for now
var orderBy = tableParams.orderBy()[0];
queryOptions.order_by = orderBy.substring(1);
queryOptions.order_dir = orderBy[0] == '+' ? 'asc' : 'desc'
}
// Users is a REST AngularJS service that talks to Rails and return promise
Users.getAll(queryOptions).then(function(result) {
params.total(result.meta.total);
$defer.resolve(result.users);
$scope.meta = result.meta;
$log.debug('ok fetching users:', result.users);
}, function(result) {
$log.debug('error fetching users:', result);
});
}
});
}
});
Rails lida com as consultas dos usuários com resultados paginados
Gem para fazer consulta avançada ActiveRecord
gem install 'squeel'
Joia para fazer paginação
gem install 'will_paginate'
Códigos adicionados em UsersController
def index
params.require(:page)
params.require(:page_size)
page = params[:page].to_i
page_size = params[:page_size].to_i
@users = User.all
if params[:search]
# credit by gem 'squeel'
search_params = JSON.load(params[:search])
@users = @users.where{full_name.like_any ["#{search_params['full_name']}%"]} if search_params["full_name"].present?
@users = @users.where{email.like_any ["#{search_params['email']}%"]} if search_params["email"].present?
end
@users_count = @users.count
# credit by gem 'will_paginate'
@users = @users.paginate(:page => page, :per_page => page_size)
if params[:order_by] && params[:order_dir]
@users = @users.order("users.#{params[:order_by]} #{params[:order_dir]}")
elsif params[:order_by]
@users = @users.order("users.#{params[:order_by]} desc")
else
@users = @users.order(id: :desc)
end
render json: @users, root: :users, each_serializer: UserSerializer, meta: { total: @users_count }
end