I am trying to put this https://github.com/angular-data-grid/angular-data-grid.github.io on my project but It doesn't work (sortable, items per page and pagination). This is my code (https://jsfiddle.net/Lz74rhp2/2/) but I dont know how to load external resources.
All my external resource:
<script src="assets/js/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="app/controllers.js"></script>
<script src="assets/js/toastr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/ripples.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.10/js/material.min.js"></script>
<script type="text/javascript" src="http://momentjs.com/downloads/moment-with-locales.min.js"></script>
<script type="text/javascript" src="assets/js/boostrap-time/js/bootstrap-material-datetimepicker.js"></script>
<script src="https://angular-data-grid.github.io/dist/pagination.js"></script>
<script src="https://angular-data-grid.github.io/dist/dataGrid.js"></script>
And when I put grid-item inside the tr my data desappear
<tr grid-item ng-repeat="item in itens | filter:search" class="comprado-{{ item.comprado }}">
<td><strong>{{ item.nombre }}</strong></td>
<td><strong>{{ item.dirreccion }}</strong></td>
<td>{{ item.telefono }}</td>
<td>
<button class="btn btn-despegar btn-small edit" ng-click="editarItem($index)">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
</button>
<button class="btn btn-danger btn-small" ng-click="deleteItem($index)">
<i class="fa fa-trash-o" aria-hidden="true"></i>
</button>
</td>
</tr>
My controller code:
var app = angular.module('myModule', ['dataGrid', 'pagination']);
app.controller('ListaComprasController',function($scope){
$scope.form = true;
$scope.item = {};
$scope.itens = [
{nombre: 'Leite', telefono: 212122, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:true,emailCom:"[email protected]"},
{nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"[email protected]"},
{nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"[email protected]"},
{nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"[email protected]"},
{nombre: 'Adssad', telefono: 3410220, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:false,emailCom:"[email protected]"},
{nombre: 'Leite', telefono: 212122, descripcion: "tadsasasdas",especialidades:"tarea",dirreccion:"Siempre Viva 920",horarioDesde:"19:00",horarioHasta:"22:00",nombreCom:"Tssa",telefonoCom:"223123",checkCom:true,emailCom:"[email protected]"}
];
$scope.adicionaItem = function () {
$scope.itens.push(
{
nombre: $scope.item.nombre,
telefono: $scope.item.telefono,
descripcion: $scope.item.descripcion,
especialidades: $scope.item.especialidades,
dirreccion: $scope.item.dirreccion,
horarioDesde: $scope.item.horarioDesde,
horarioHasta: $scope.item.horarioHasta,
checkCom: $scope.item.checkCom,
nombreCom: $scope.item.nombreCom,
apellidoCom: $scope.item.apellidoCom,
telefonoCom: $scope.item.telefonoCom,
emailCom: $scope.item.emailCom
}
);
$scope.item.produto = $scope.item.quantidade = '';
toastr.success("Item adicionado com sucesso.");
$scope.form = true;
};
$scope.addItem = function () {
$scope.form = false;
};
$scope.editarItem = function(index){
$scope.form = false;
$scope.item = $scope.itens[index];
$scope.edit = true;
};
$scope.applyChanges = function(index){
$scope.item = {};
$scope.form = false;
$scope.edit = false;
toastr.success("Item alterado com sucesso.");
};
$scope.CancelarItem = function(index){
$scope.edit = false;
$scope.form = true;
$scope.item = {};
};
$scope.deleteItem = function(index){
$scope.itens.splice(index, 1);
toastr.success("Item removido com sucesso.");
};
$scope.gridOptions = {
data: [], //required parameter - array with data
//optional parameter - start sort options
sort: {
predicate: 'nombre',
direction: 'asc'
}
};
});
