Smart-Table Había una Vez.....

Había una Vez.....

Este año 2016 por obligación del trabajo tuve que utilizar la herramienta AngularJS. Ya había escuchado comentarios sobre las bondades de este framework y les soy sincero no me llamaba la atención, hasta que comence a estudiarlo me dí cuenta que me estaba pérdiendo un manjar de google. Por cierto ya me volví adicto a AngularJS. mmmmmmm.... Vamos acabar con estas palabrería de Había una Vez y vamos a lo concreto, les parece bien?.

El tema es smart-table por cierto a todo principiante le recomiendo esta url:

The development of smart-table is sponsored by TropicalDev
http://lorenzofox3.github.io/smart-table-website/#section-intro

El código de una simple tabla en Smart-Table es la siguiente:

Paso 1 Crear modulo en angular y un controlador en un fichero js.

var app = angular.module('myApp', ['smart-table'])

app.controller('basicsCtrl', ['$scope', function (scope) {

    scope.rowCollection = [
        {name: 'Yeiniel Alfonso', birthDate: new Date('1985-06-01')},
        {name: 'Lisandra Polo', birthDate: new Date('1989-01-11')},
        { name: 'Daymaris Alfonso', birthDate: new Date('1992-01-07') },
        { name: 'Ismary de Jesus', birthDate: new Date('1965-08-25')},
        { name: 'Juana Palma', birthDate: new Date('1951-10-11')},
        { name: 'Lazaro Humberto', birthDate: new Date('1987-03-15')}
    ];

    scope.itemsByPage = 3;
}]);

Paso 2 HTML

    
        <div data-ng-app="myApp" data-ng-controller="basicsCtrl">
            < table data-st-table="rowCollection" class="table table-striped">
                <thead>
                    <tr>
                        <th scope="row">#</th>
                        <th scope="row">Name</th>
                        <th>Birth Date</th>
                   </tr>
                   <tr>
                    <td colspan="2"> 
                    <input st-search class="input-sm form-control" placeholder="Search" type="search">
                    </td>
                   </tr>
               </thead>
            <tbody>
            <tr data-ng-repeat="row in rowCollection">
            <td>{{$index+1}}</td>
            <td>{{row.name}}</td>
            <td>{{row.birthDate|date}}</td>
                            </tr>
                        </tbody>
            <tfoot>
            <tr>
            <td colspan="3" class="text-center">
            <div data-st-pagination="" data-st-items-by-page="itemsByPage" data-st-displayed-pages="3"></div>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
            <script src="angular.min.js"></script>
            <script src="smart-table.js"></script>
            <script src="basicsCtrl.js"></script>
                </div>
    
Cuando hacía una búsqueda en google sobre smart-table siempre salían 
artículos con el ejemplo característico de mostrar una información 
en forma tabla. Me habían pédido mostrar contenido dentro

 de thumbnails en bootstrap. Y los hice con Smart-Table:

                <div data-ng-app="myApp" data-ng-controller="basicsCtrl">
                <h2 class="text-center">Smart-Table</h2>
                <div class="container-fluid" data-st-table="rowCollection">
                <div class="row">
                <form class="navbar-form" role="search">
                <input data-st-search class="form-control" placeholder="Search" type="search">
                        </form>
                     </div>
                <br />
                <div class="row">
                <div class="col-sm-6 col-md-4" data-ng-repeat="row in rowCollection">
                <div class="thumbnail2" data-ng-class="{'thumbnail1': $index % 2 == 0}">
                <div class="caption">
                <p class="title"> Card #{{$index+1}}</p>
                <hr />
                <p>Name: {{row.name}} </p>
                <p>birth Date: {{row.birthDate | date}} </p>
                                    </div>
                                </div>
                            </div>
                    
                        </div>
                <div class="row">
                <div class="text-center" data-st-pagination="" data-st-items-by-page="itemsByPage" data-st-displayed-pages="3">

</div> </div> </div>

Espero que les sea de utilidad

Best Regard

Descargar
https://github.com/sitieh2013/ExampleSmartTable.git