Tabla AngularJS con paginaci贸n, filtro y clasificaci贸n respaldada por Rails

Instalaci贸n de ng-table

ng-table es un m贸dulo de AngularJS que habilita la tabla HTML con funciones de paginaci贸n, filtro y clasificaci贸n.

C贸digos agregados para configurar ng-table

[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 una tabla 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 los datos del controlador a la 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 maneja las consultas de los usuarios con resultados paginados

Gema para hacer una consulta avanzada de ActiveRecord

gem install 'squeel'

chillido

Gema para hacer paginaci贸n

gem install 'will_paginate'

will_paginate

C贸digos agregados en 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