/expandtable

An extended AngularJS Directive Expandable Table with expand row, pagination, and other added features. (supports twitter bootstrap v3).

Primary LanguageCSSMIT LicenseMIT

expandtable

An extended AngularJS Directive pricing-table with form, pagination, and other added features. (supports twitter bootstrap v3).

Install

bower install expandtable#`version` --save

or Include all neccessary files

<link rel="stylesheet" href="bower_components/bootstrap/dist/bootstrap.min.css" />

<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/expandtable/build/expandtable.min.js"></script>

Documentation

Configuration

An extended AngularJS Directive Expandable Table. Configure the directive to your AngularJSApp [app.js].

angular.module('your app name', [
    ......,
    'expandTable'
  ]);

Populating a expandtable using HTML

<expand-table columns="columns" store="store" pagination="pagination" operation="operation"></expand-table>

The attributes are described as follows:

  • columns - The pricing-table Setings for columns (is JSONObject)(is Required).
    • titleIndex - The pricing-table Index column for display titles (is String).
    • columns - The pricing-table needs to display the columns (is Array)(is Required).
  • store - The pricing-table needs to data store (is Array)(is Required).
  • pagination - Paging configuration (is JSONObject)(Optional):
    • total - Total data.(is Number).
    • currentPage - The current page.(is Number).
    • pageCount - The total number of pages. (is Number).
    • goToFirst - First page button click event. (is Function).
    • goToPrevious - Previous page button click event. (is Function).
    • goToNext - Next page button click event. (is Function).
    • goToLast - Last page button click event. (is Function).
  • operation - The pricing-table footer operation button configuration (is JSONObject)(Optional):
    • text - Button text. (is String).
    • cls - Button class. (is String).
    • iconCls - Icon class. (is String).
    • handlers - Button handler. (is JSONObject).
      • click - Button click event. (is Function).

Add the following code in your controller :

$scope.columns = {
  titleIndex: 'title',
  columns: [{
    text: 'User Code',
    dataIndex: 'uuid'
  },{
    text: 'User Name',
    iconCls: 'icon-user',
    dataIndex: 'name'
  },{
    text: 'Phone',
    dataIndex: 'phone'
  },{
    text: 'Create Date',
    filter: {
      type: 'date',
      format: 'yyyy-MM-dd'
    },
    dataIndex: 'createDate'
  }]
};
function requestTableDataFunction(){
  $http.get('json/table-pricing.json')
    .success(function(response){
      $scope.store = response;
    })
    .error(function(er){
      console.log(er);
    });
}

var startpage = 1;
$scope.pagination = {
  total: 0,
  currentPage: 0,
  pageCount: 0,
  goToFirst : function(){
    startpage = 1;
    requestTableDataFunction();
  },
  goToPrevious : function(){
    startpage--;
    requestTableDataFunction();
  },
  goToNext : function(){
    startpage++;
    requestTableDataFunction();
  },
  goToLast : function(){
    startpage = $scope.pagination.pageCount;
    requestTableDataFunction();
  }
};

$scope.operation = {
  text: 'Go',
  cls: 'btn btn-info',
  iconCls: 'm-icon-swapright m-icon-white',
  handlers: {
    click: function(item){
      console.log(item);
    }
  }
};