Introducción en la mesa inteligente:
Es un módulo de Angularjs que se utiliza con fines de visualización como formato de tabla con un conjunto de características como filtrado, clasificación, etc. Esto es muy útil durante la preparación de informes, el filtrado y la búsqueda de datos de una manera más rápida en angular js. Es liviano, fácil de usar para desarrolladores, robusto, modular y extensible.
Enfoques:
- Podemos comenzar a usar la tabla inteligente usando las siguientes formas
- Bower instalar angular-smart-table (o)
- npm instalar angular-smart-table
- Una vez que se ejecutan los scripts anteriores, estamos configurados para usar angular-smart-table
Sintaxis:
- Agregue el módulo angular.module(‘<nameofyourapp>’, [‘smart-table’] a la aplicación angular.
- Al igual que siguiendo la estructura normal de la tabla html, en el elemento de la tabla, debe agregar el atributo » st-table » para informar a la tabla inteligente sobre la colección que mostrará los datos (es decir, usando el repetidor)
- Para buscar un contenido en angular-smart-table, necesitamos usar la directiva stSearch. Puede ser una lista separada por comas de elementos de búsqueda que deben buscarse
- El atributo stDebounceTime (el valor está en milisegundos) se puede utilizar para controlar el tiempo de búsqueda. A veces se realizarán llamadas inútiles (especialmente cuando esté conectado al servidor) y para superar, se necesita este atributo.
- Durante la búsqueda, la entrada puede ser un patrón de expresión regular. A veces, para escapar de caracteres específicos de expresiones regulares en la entrada, necesitamos usar el atributo stSearchEscape.
Ejemplos básicos y explicaciones:
Veamos el código de muestra de búsqueda en la tabla inteligente junto con el filtrado y la paginación que se ve en el código a continuación.
Los datos se recuperan de «http://coderszine.com/demo/rest-api/v1/employee/read» para nuestra muestra
Atributo stSafeSrc:
Como hemos tomado datos del punto final tranquilo (incluso de una base de datos remota, punto final tranquilo, llamada ajax, etc.)
, necesitamos usar este atributo sin falta. Además, la tabla inteligente crea una copia de la colección mostrada y, dado que se trata de datos asíncronos, este atributo es obligatorio.
Aquí, los «empleados» se recuperan de forma asíncrona y deben representarse y se especifica en st-safe-src
sort se aplica en todas las columnas y, por lo tanto, se da st-sort para ordenar.
se aplica paginación para tener 5 registros por página.
Aporte :
Con los enfoques anteriores, representemos los datos en una tabla inteligente con funcionalidades de búsqueda, ordenación y paginación.
SampleApp = angular.module(
'SampleApp', ['SampleApp.controllers', 'smart-table']);
angular.module('SampleApp.controllers', []).controller(
'sampleController',
['$scope', '$http', function($scope, $http)
{
$scope.loading = false;
$scope.getData = function() {
$scope.loading = true;
$http.get(
"http://coderszine.com/demo/rest-api/v1/employee/read")
.then(function(response){
$scope.employees = response.data;
$scope.loading = false;
});
}
$scope.getData();
}]);
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js">
</script>
<link rel="stylesheet"
href=
"https://fonts.googleapis.com/css?family=Open+Sans" />
<!-- Indication to know we are
using smartTableApp.js -->
<script src="smartTableApp.js">
</script>
</head>
<body>
<!-- Including our SampleApp and
iterate in Angular JS -->
<div class="container"
ng-app="SampleApp"
ng-controller="sampleController">
<h2>Angular Smart Table Example with
Pagination, Search and Sorting in
a simpler way</h2>
<div ng-show="loading"><h3>Loading the data...</h3>
</div>
<table st-table="displayEmployee"
st-safe-src="employees"
class="table table-striped">
<thead>
<tr>
<th colspan="1">
<input st-search placeholder=
"Please provide data to search"
class="input-sm form-control"
type="search" />
</th>
</tr>
<tr>
<th st-sort="name">Employee Name</th>
<th st-sort="gender">Gender</th>
<th st-sort="age">Employee Age</th>
<th st-sort="skills">Skills</th>
<th st-sort="designation">
Employee Designation</th>
</tr>
</thead>
<tbody>
<tr st-select-row="row"
st-select-mode="multiple"
ng-repeat="employee in displayEmployee">
<td>{{employee.name}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.age}}</td>
<td>{{employee.skills}}</td>
<td>{{employee.designation}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-pagination=""
st-items-by-page="5"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
Producción:
Después de buscar un texto
Clasificación basada en la designación
Publicación traducida automáticamente
Artículo escrito por priyarajtt y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA