problem angular datatable
problem angular datatable
j_rach
Posts: 3Questions: 0Answers: 0
hello everyone,
I'm trying to implement this example :https://l-lin.github.io/angular-datatables/#/angularWayDataChange
but infortunately I don't get filtring and search features :please help me to find what I've missed in my code:
<html ng-app="showcase.angularWay.dataChange">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-resource.min.js"></script>
<script type="text/javascript" src="js/angular-datatables.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title></title>
</head>
<body >
<div ng-controller="AngularWayChangeDataCtrl as showCase">
<form class="form-inline" ng-submit="showCase.addPerson()">
<table datatable="ng" dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="row-border hover table table-striped"s>
<thead>
<tr>
<th>
<div class="form-group">
<label>
<input class="form-control" name="id" ng-model="showCase.person2Add.id" value="" type="number">
</label>
</div>
</th>
<th>
<div class="form-group">
<label>
<input class="form-control" name="firstName" ng-model="showCase.person2Add.firstName" value="" type="text">
</label>
</div>
</th>
<th>
<div class="form-group">
<label>
<input class="form-control" name="lastName" ng-model="showCase.person2Add.lastName" value="" type="text">
</label>
</div>
</th>
<th>
<div class="form-group">
<button type="submit" class="btn btn-success"><i class="fa fa-plus"></i></button>
</div>
</th>
</tr>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in showCase.persons">
<td>{{ person.id }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
<td>
<button type="button" ng-click="showCase.modifyPerson($index)" class="btn btn-warning"><i class="fa fa-edit"></i></button>
<button type="button" ng-click="showCase.removePerson($index)" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</body>
</html>
angular.module('showcase.angularWay.dataChange', ['datatables', 'ngResource'])
.controller('AngularWayChangeDataCtrl', AngularWayChangeDataCtrl);
function AngularWayChangeDataCtrl($resource, DTOptionsBuilder, DTColumnDefBuilder) {
var vm = this;
vm.persons = $resource('data/data.json').query();
vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers');
vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0),
DTColumnDefBuilder.newColumnDef(1),
DTColumnDefBuilder.newColumnDef(2),
DTColumnDefBuilder.newColumnDef(3).notSortable()
];
vm.person2Add = _buildPerson2Add(1);
vm.addPerson = addPerson;
vm.modifyPerson = modifyPerson;
vm.removePerson = removePerson;
function _buildPerson2Add(id) {
return {
id: id,
firstName: 'Foo' + id,
lastName: 'Bar' + id
};
}
function addPerson() {
vm.persons.push(angular.copy(vm.person2Add));
vm.person2Add = _buildPerson2Add(vm.person2Add.id + 1);
}
function modifyPerson(index) {
vm.persons.splice(index, 1, angular.copy(vm.person2Add));
vm.person2Add = _buildPerson2Add(vm.person2Add.id + 1);
}
function removePerson(index) {
vm.persons.splice(index, 1);
}
}
Replies
I think you'd be best asking the Angular DataTables integration author. That integration is thirdparty software.
Allan
Can you show me a link where I can post my question please,
thanks
The Angular DataTables project isn't one of mine so I can say for sure. But you might find information on their site or perhaps the GitHub issues.
Allan
Thank you Allan