9/3/2017 AngularJS 

­ NgTable, ejemplo de paginación y edición con mysql ­ Uno de piera

Uso de cookies

Uno de piera
Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su
consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para
mayor información.
ACEPTAR

¿Qué estás buscando?     

PHP  JAVASCRIPT  CURSOS DISPONIBLES JAVA 

API DE PAYPAL PYTHON RUBY ON RAILS

Home  AngularJS  AngularJS – NgTable, ejemplo de paginación y edición con mysql

 AngularJS, Programación Web

POSTS
RECIENTES
AngularJS – NgTable,
Aprende
ejemplo de paginación y a
utilizar
la
edición con mysql librería
google
 Israel965  2 Años Ago maps …
 9 Marzo, 2017

  FACEBOOK      
Mapear
múltiples
verbos
 ANTERIOR SIGUIENTE  http
en las
rutas …
 7 Marzo, 2017

Query
Scopes
en
Eloquent
Aprende a desarrollar aplicaciones para web y móvilcon los2017
7 Marzo, cursos de X

cursosdesarrolloweb.es
https://www.uno­de­piera.com/angularjs­ngtable­ejemplo­de­paginacion­y­edicion­con­mysql/ 1/8
9/3/2017 AngularJS ­ NgTable, ejemplo de paginación y edición con mysql ­ Uno de piera

Google
Uso de cookies maps
con
Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su
consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para
mayor información. php y
ACEPTAR mysql
 6 Marzo, 2017

Condicionales
en
ReactJS
 5 Marzo, 2017
NgTable es un módulo que nos permite crear tablas con
paginación, ordenación por columnas, ltros, edición
directamente contra la tabla y muchas más opciones típicas
CURSO DE
de, por ejemplo, datatables o jtables en angularjs. VUE.JS 2

Para este ejemplo veremos cómo crear el ejemplo más

sencillo, que es la paginación y otro más complejo, que es la
edición.

Los ejemplo de ngtable son con datos estáticos, nosotros

mejoraremos ese aspecto y obtendremos los datos de un
servicio rest ya creado anteriormente en el vídeo tutorial api DESARROLLO
rest con slim haciendo uso de servicios y promesas. DE
APLICACIONES
CON REACTJS
Las dependencias que necesitamos instalar a través de bower
son las siguientes.

Shell
1 bower install angular
2 bower install angular-route
3 bower install ng-table
4 bower install bootstrap

Una vez los tengamos instalados y tengamos el servicio rest APLICACIONES

NATIVAS CON
listo (api rest con slim) podemos crear nuestro archivo app.js REACT NATIVE
en la raíz y añadir el siguiente código javascript.

JavaScript
1 var app = angular.module('main', ['ngRoute','ngTable'
2  
3 app.config(['$routeProvider', function ($routeProvider
Aprende
4 { a desarrollar aplicaciones para web y móvil con los cursos de X

cursosdesarrolloweb.es
5     $routeProvider.when('/pagination', {
6       templateUrl : "templates/pagination.html",
https://www.uno­de­piera.com/angularjs­ngtable­ejemplo­de­paginacion­y­edicion­con­mysql/ 2/8
9/3/2017 AngularJS ­ NgTable, ejemplo de paginación y edición con mysql ­ Uno de piera
6       templateUrl : "templates/pagination.html",
7      controller : "paginationCtrl"
Uso de cookies
8     })
9     .when('/edit', { CURSO
Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su
10       templateUrl : "templates/edit.html", AVANZADO DE
consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para
mayor información.
11      controller : "editCtrl" LARAVEL 5 Y
12     }) ACEPTAR VUE.JS 2
13     .otherwise({ redirectTo : "/pagination"});
14 }]);
15  
16 app.service('dataService', ['$http', '$q', function
17 {
18     var obj = {},
19     deferred = $q.defer(),
20     apiUrl = "http://localhost/php/slimrest/books"
21     obj.get = function()
22     {
23         $http.get(apiUrl)
24         .success(function(data, status, headers,
25         {
26             deferred.resolve(data, status, headers NUEVO CURSO
27         }) DE REACTJS Y
28         .error(function(data, status, headers, config
29         {
REDUX
30             deferred.reject(data, status, headers
31         });
32         return deferred.promise;
33     }  
34     return obj;
35 }]);
36  
37 app.controller('paginationCtrl', function($scope
38 {
39   dataService.get().then(function(results)
40   {
41       $scope.tableParams = new ngTableParams(
42           { CURSO
43               page: 1,          // primera página a mostrar COMPLETO DE
44               count: 2          // registros por página
45           }, LARAVEL 5.3
46           {
47               total: results.length, // resultados en total
48               getData: function($defer, params)
49               {
50                 $defer.resolve(results.slice((params
51               }
52           }
53       );
54   });
55 });
56  
57   CURSO DE
58 app.controller('editCtrl', function($scope, ngTableParams ANGULAR 2.0
59 {
60     dataService.get().then(function(results)
61     {
62         $scope.tableParams = new ngTableParams({
63             page: 1,          // primera página a mostrar
64             count: 2          // registros por página
65         }, {
66             total: results.length, // resultados en total
67             getData: function($defer, params)
68             {
Aprende a desarrollar aplicaciones para web y móvilCURSO
69                 $defer.resolve(results.slice((params con los DEcursos de
X

70             } cursosdesarrolloweb.es TOTAL.JS

71         });
https://www.uno­de­piera.com/angularjs­ngtable­ejemplo­de­paginacion­y­edicion­con­mysql/ 3/8
9/3/2017 AngularJS ­ NgTable, ejemplo de paginación y edición con mysql ­ Uno de piera
71         });
72     });
Uso de cookies
73  
74     //aquí podemos actualizar el libro
Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su
75     $scope.save = function(book)
consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para
mayor información.
76     {
77         console.log(book); ACEPTAR
78     }
79 });

Ahora ya tenemos el código necesario con la información CURSO

COMPLETO DE
formateada y preparada correctamente para que el módulo WORDPRESS
ngtable de angularjs pueda trabajar, crea una carpeta llamada
templates en la raíz del proyecto y dentro dos archivos,
pagination.html y edit.html. También debes crear el archivo
index.html en la raíz del proyecto y añadir el siguiente código.

XHTML
1 <!DOCTYPE html>
2 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3 CURSO DE
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4 <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->CODEIGNITER 3
5 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
6     <head>
7         <meta charset="utf-8">
8         <meta http-equiv="X-UA-Compatible" content
9         <meta name="viewport" content="width=device-width"
10  
11         <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap
12         <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap
13         <!--[if lt IE 9]>
14         <script src="http://code.jquery.com/jquery-1.10.2.min.js"
15         <![endif]-->
16         <script src="./bower_components/angular/angular.min.js"
17         <script src="./bower_components/angular-route/angular-route.min.js"
18         <script src="app.js"></script> CURSO
19 EXPRESS DE
        <script src="./bower_components/ng-table/ng-table.js"
20 LUMEN 5.3
        <link rel="stylesheet" href="./bower_components/ng-table/ng-table.css"
21     </head>
22 <body ng-app="main">
23 <div class="container">
24  
25 <div ng-view></div>
26         
27 </div>
28 </body>
29 </html>

CURSO DE
Abre el archivo pagination.html y añade el siguiente código. JQUERY
COMPLETO
XHTML
Aprende
1 <div a desarrollar
class="row"> aplicaciones para web y móvil con los cursos de X

2  
cursosdesarrolloweb.es
3 <p><strong>Page:</strong> {{tableParams.page()}}
https://www.uno­de­piera.com/angularjs­ngtable­ejemplo­de­paginacion­y­edicion­con­mysql/ 4/8
9/3/2017 AngularJS ­ NgTable, ejemplo de paginación y edición con mysql ­ Uno de piera
3 <p><strong>Page:</strong> {{tableParams.page()}}
4 <p><strong>Count per page:</strong> {{tableParams.count()}}
Uso de cookies
5  
6     <table ng-table="tableParams" class="table ng-table-responsive"
Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su
7         <tr ng-repeat="book in $data">
consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para
mayor información.
8             <td data-title="'Autor'">
9                 {{book.author}} ACEPTAR
10             </td>
11             <td data-title="'Título'">
12                 {{book.title}}
13             </td> CURSO DE
14         </tr> PHALCON 3
15     </table>
16 </div>

Cómo puedes ver, no tenemos nada especial, en $data

tenemos la información lista para recorrer y hacemos eso,
tableParams lo hemos mandado con el $scope desde nuestro
controlador, así podemos acceder a toda la info.
DESARROLLO
Haz lo mismo con el archivo edit.html. PROFESIONAL
PHP
XHTML
1 <div>
2  
3     <table ng-table="tableParams" class="table">
4         <tr ng-repeat="book in $data">
5             <td data-title="'Autor'">
6                 <span ng-if="!book.$edit">{{book.author}}
7                 <div ng-if="book.$edit"><input class
8             </td>
9             <td data-title="'Título'" width="200"
10                 <span ng-if="!book.$edit">{{book.title}}
11                 <div ng-if="book.$edit"><input class
12             </td> CURSO DE
13             <td data-title="'ISBN'" width="200"> SOCKETIO CON
14                 <span ng-if="!book.$edit">{{book.isbn}}NODEJS
15                 <div ng-if="book.$edit"><input class
16             </td>
17             <td data-title="'Actions'" width="200"
18                 <a ng-if="!book.$edit" href="" class
19                 <a ng-if="book.$edit" href="" class
20             </td>
21         </tr>
22     </table>
23 </div>

Aquí tenemos más cosas, sobre todo un botón que nos CURSO DE PHP
permite salvar nuestro book, la lógica de que sea visualizado 7 AVANZADO
o no se hace a través de ng-if y se setea con ng-click, si
vemos el botón de salvar tenemos dos acciones, una que

Aprende a desarrollar
setea book.$edit aplicaciones
y otra que llama para
a la función save web yelmóvil con los cursos de
pasando X

cursosdesarrolloweb.es
https://www.uno­de­piera.com/angularjs­ngtable­ejemplo­de­paginacion­y­edicion­con­mysql/ 5/8
9/3/2017 AngularJS ­ NgTable, ejemplo de paginación y edición con mysql ­ Uno de piera

book en cuestión, es útil ver cómo podemos utilizar tanta

Uso de cookies
lógica como necesitemos con ng-click.
Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su
consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para
mayor información.
Si accedes en mi caso a ACEPTAR
(http://localhost/angularjs/ngtable/#/edit) podrás ver la
edición, y en (http://localhost/angularjs/ngtable/#/pagination)
la paginación sin edición. CURSO DE
ADONISJS
En la edición, cuando pulses en salvar simplemente podrás
ver un console.log con el objeto book, hacer la actualización
te lo dejo a tí, lo interesante es ver cómo utilizar este módulo,
y creo que lo hemos conseguido.

Espero que te sirva y te parezca útil, cualquier duda no dudes

en comentar, a continuación dejo los archivos para su
descarga, tanto la parte de angularjs como la api rest con
slim.

Descargar ngtable y api rest slim

  FACEBOOK      

 ANTERIOR SIGUIENTE 

POSTS RELACIONADOS

Cómo Realizar Filtros en

añadir una pagos con laravel 4
carpeta paypal
 Israel965
helpers o mediante
 3 Agosto,
libraries a IPN con
Aprende
nuestrosa desarrollar aplicaciones2013
nuestro para web y móvil con los cursos de X

cursosdesarrolloweb.es
https://www.uno­de­piera.com/angularjs­ngtable­ejemplo­de­paginacion­y­edicion­con­mysql/ 6/8
9/3/2017 AngularJS ­ NgTable, ejemplo de paginación y edición con mysql ­ Uno de piera

proyectos carrito de
Uso de cookies
en laravel 4 compras
Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su
consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para
 Israel965
mayor información.  Israel965

 11 Agosto,  24 Agosto, ACEPTAR

2013 2013

Video Inner join Crud con

tutorial 6, con delete Laravel 5:
Validacione Create
 Israel965
s en el
 13  Israel965
servidor
Septiembre,  21 Marzo,
con Ajax y
2012 2015
Codeigniter
 Israel965

 10 Mayo,

2014

Helpers en Herramient Detectar

codeigniter as de links en
Phalcon, AngularJS,
 Israel965
desarrollo el ltro linky
 9 Marzo,
rápido
2013  Israel965
 Israel965  14
 21 Septiembre,
Diciembre, 2013 2013

Aprende a desarrollar aplicaciones para web y móvil con los cursos de X

cursosdesarrolloweb.es
https://www.uno­de­piera.com/angularjs­ngtable­ejemplo­de­paginacion­y­edicion­con­mysql/ 7/8
9/3/2017 AngularJS ­ NgTable, ejemplo de paginación y edición con mysql ­ Uno de piera

Uso de cookies
Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su
consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para
mayor información.
ACEPTAR
Angular
Material Heroku,
¿Te servicio de
Design:
consideras computació
Introducció
un buen n en la
n
desarrollad nube
 Israel965 or web?
 Israel965
 28 Marzo,
 Israel965
 11 Octubre,
2015
 23
2014
Noviembre,

2016

Uno de piera Copyright © 2017. 

Aprende a desarrollar aplicaciones para web y móvil con los cursos de X

cursosdesarrolloweb.es
https://www.uno­de­piera.com/angularjs­ngtable­ejemplo­de­paginacion­y­edicion­con­mysql/ 8/8