angular-datatable

An AngularJS module for creating dynamic bootstrap tables

Features

Sortable
Searchable
Select row by click/tap or cursor keys
Dynamically load more/less data (paging) while scrolling
Sticky header row can remain visible on top while scrolling data
Angular service methods and events for using with your own Angular module

Demo

[Try it on Plunker] (http://plnkr.co/edit/CpPD56z1BIguJ7eSBfb3?p=preview)

Installation

Installation is easy as angular-datatable has minimal dependencies - only the AngularJS (https://angularjs.org), Twitter Bootstrap's CSS (http://getbootstrap.com/css) and FixedHeaderTable jquery plugin (http://www.fixedheadertable.com) are required.

Angular Requirements

angular-datatable has been tested with Angular 1.5.0

Bootstrap Requirements

angular-datatable has been tested with Bootstrap CSS 3.3.6

FixedHeaderTable Requirements

angular-datatable has been tested with FixedHeaderTable 1.3

Manual installation

After downloading dependencies (or better yet, referencing them from your favorite CDN) you need to download build version of this project. All the files and their purposes are described here:

datatable.js : The angular module javascript code
datatable.phtml : The angular template code
datatable.css : angular-table css
demo/demo.js : An angular demo application module that uses angular-datatable
demo/index.html : The index html file for the demo application

Adding dependency to your project

When you are done downloading all the dependencies and project files the only remaining part is to add dependencies on the datatable AngularJS module:

angular.module('myModule', ['datatable']);

##Directive configuration attributes

name : Unique name used to distinguish between multiple tables in the same application
title : An optional title that is rendered above the table inside heading element
container-classes : Container element classes. Container element contains every other element created by angular-datatable
heading-classes : Heading element classes. Heading element contains the title
body-classes: Classes for the element that contains the actual table and an optional search box. Do not confuse with html body.
table-height: The height of the table in pixels
scroll-for-more: If true events are generated when table scrolling reaches the top or the bottom. Such events can be used to load more data.
scroll-for-more-distance: The distance in pixels from top or bottom when the corresponding events are generated.
show-search: If true a search box is rendered above the table

See demo/index.html for an example of directive config attributes

##Service API

angular-datatable provides datatableService angular service that provides the following methods:

setFields(name, someFields) : Sets the fields array. name is the unique name of this datatable. The someFields is an array of objects of the form
```
{title: string, field: string, sortable: boolean}
```
getFields(name) : Returns the fields array. name is the unique name of this datatable.
setData(name, someData, $scope, params) : Set the data array. The data array is an array of objects of the type
```
{field1name: data, field2name: data, ...}
```
$scope is used for broadcasting a datatable/reloadData event after setting the data params is an object with extra parameters. Currently only boolean params.redraw is used for forcing an redraw of the table after setting data.
getData(name) : Returns the data array
setSort(name, someSort, $scope) : Sets the sorting of the table. someSort object is of the form
```
{index: number, field: a field object(see setFields), order: 'asc'||'desc'}
```
A datatable/setSort event is broadcasted to $scope if provided.
getSort(name) : Returns the sort object
setIdField(name, fieldName) : Set the filed that is used to identify data rows
getIdField(name) : Get the id field
setSelected(name, index, id, $scope, options) : Set the selected row index: The index of the selected row id: The id of the selected data item (see setIdField) $scope: A datatable/updateSelected event will be broadcasted on this scope options: This object will be passed with the datatable/updateSelected
getSelected(name) : Returns the selected data item as an object of the following form
```
{index: number, id: mixed, dataItem: the data item object }
```
setDatatableScope(name, scope): Set the datatable scope. This is the datatable module scope used for emiting events.
getDatatableScope(name) : Returns the datatable scope
setSearch(name, asearch, $scope) : Sets the search box contents to the asearch string. A datatable/setSearch event is broadcasted on $scope.
getSearch(name) : Returns the search string
waitForData(name, where) : Used to notify datatable that we are waiting for table data. Used to stop repeating datatable/scrollReachedTop and datatable/scrollReachedBottom events while waiting for data from an asynchronous call. where is 'top' or 'bottom'.
getWaitForData(name) : Returns an object of the form:
```
{status: boolean, where: 'top'||'bottom'}
```
scrollTop(name) : Scrolls the table at top

##Events

datatable/ready : Datatable is fully rendered
datatable/reloadData : Data has been set
datatable/setSort : Sort has been set
datatable/updateSelected : Selected item has been set
datatable/setSearch : Search string has been set
datatable/waitForData : waitingForData objeject has been set
datatable/scrollTop : Scroll table to top
datatable/scrollReachedTop : Table scroll has reached the top
datatable/scrollReachedBottom : Table scroll has reached the bottom

ktogias / angular-datatable Goto Github PK