Bind Data in the table
<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl as self">
<head>
<title></title>
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/font-awesome.css" rel="stylesheet" />
<link href="Content/data-table.css" rel="stylesheet" />
<link href="Content/style.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<table class="table table-bordered"
data-table
data-list="self.array"
data-filter="true"
data-lang="fa">
<tbody>
<tr data-orderby="name" data-asc="false">
<td data-header-source="name" data-header="name" data-binding="name" data-sortable="true"></td>
<td data-header="action">
<a click="add" click-params="[item]">add</a>
</td>
</tr>
</tbody>
</table>
</div>
<script src="Scripts/jquery-2.2.4.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/data-table.js"></script>
</body>
</html> var app = angular.module("app", ["dataTable"]);
app.controller("ctrl", ["$scope", "$http", "tableFactory", "tableService", function ($scope, $http, tableFactory, tableService) {
var self = this;
tableFactory.set(self);
self.array = [
{ name: "A" },
{ name: "A2" },
{ name: "A3" },
{ name: "A4" }
];
$scope.filter = {
fields: [
{ name: "name", filter: true, setup: { title: "name", type: "text" } },
{ name: "username", filter: false, setup: { title: "username", type: "text" } }
]
}
$scope.pageOnChange = function () {
console.log(tableService.getAction());
}
self.add = function (item) {
console.log(item);
}
}]);- data-table: 'directive name'
- data-list: 'array'
- data-current-page: 'int'
- data-page-size: 'int'
- data-return-action: 'function return tableService.getAction()'
- data-server-side-records: "int" > if this set, pagination numbers will change by server data records length, else pagination number eq array length
- data-filter: 'bool'
- data-filter-by: 'some name from your abject params, EX: name OR lastName OR Id' from {name: "x", lastName: "Y", Id: 2}
- data-filter-advance: 'model'
- data-lang: "en/fa"
default sortBy and orderBy when table start:
- data-orderby: 'some name from your abject params, EX: name OR lastName OR Id' from {name: "x", lastName: "Y", Id: 2}
- data-asc: 'bool'
default sortBy and orderBy when table start:
- data-header: 'header title for each col'
- data-binding: 'some name from your abject params, EX: name OR lastName OR Id' from {name: "x", lastName: "Y", Id: 2}
- data-sortable: 'bool'
- data-header-source= 'string, what you bind in td for sorting'
<td data-header-source="Name" data-header="name" data-binding="name" data-sortable="true"></td>
<td data-header-source="Username" data-header="username" data-sortable="true">{{item.username}}</td>
<td data-header="action">
{{item.email}}
<a href="{{item.id}}">btn</a>
<a click="add" click-params="[item]">action</a>
</td> var options = [
{ name: "manager", value: 0 },
{ name: "user", value: 1 }
];
$scope.filter = {
fields: [
{ name: "name", filter: true, setup: { title: "name", type: "text" } },
{ name: "role", filter: true, setup: { title: "role", type: "select", options: options } }
]
}