Table Lite Demo

this fiddle allows you to play with ad-table-lite directive

by kash patel

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.19/angular-sanitize.js"></script>
<script src="http://adaptv.github.io/adapt-strap/dist/adapt-strap.js"></script>
<script src="http://adaptv.github.io/adapt-strap/dist/adapt-strap.tpl.js"></script>
<link rel="stylesheet" href="http://adaptv.github.io/adapt-strap/dist/adapt-strap.css">
<div ng-app="adaptv.adaptStrapDocs" ng-controller="tableliteCtrl">
    
    <!-- ========== template files ========== -->
    <script type="text/ng-template" id="src/tablelite/docs/buyCell.html">
        <button class="btn btn-primary btn-xs" ng-click="buyCar(item)">
            Buy
        </button>
    </script>
    
    <script type="text/ng-template" id="src/tablelite/docs/orderMoreInfoExpand.html">
        <div>
            <order-more-info order='item'></order-more-info>
        </div>
    </script>
    
    <script type="text/ng-template" id="src/tablelite/docs/jobsExpand.html">
        <div>
            {{ item.parts }}
        </div>
    </script>
    
    <script type="text/ng-template" id="src/tablelite/docs/orderMoreInfo.html">
        <h3 ng-if="loading">Loading...</h3>
        <div ng-if="!loading">
            <ad-table-lite table-name="orderJobs"
                 column-definition="jobsColumnDefinition"
                 local-data-source="jobs"
                 page-sizes="[10, 20]"
                 pagination-btn-group-classes="pagination pagination-sm"
                 table-classes="table table-bordered"
                 items-not-found-message="Parts Not Found"
                 row-expand-template="src/tablelite/docs/jobsExpand.html">
              </ad-table-lite>
        </div>
    </script>
        
  <p class="text-muted"><input type="text" placeholder=" enter search text " ng-model="models.searchText"/></p>

  <!-- ========== Usage ========== -->
  <ad-table-lite table-name="repairOrders"
             ...

JavaScript

// ========== initialize documentation app module ========== //
angular.module('adaptv.adaptStrapDocs', [
    'ngSanitize',
    'adaptv.adaptStrap'])

// ========== controllers ========== //
.controller('tableliteCtrl', ['$scope', function ($scope) {
    $scope.models = {
        searchText: '',
        repairOrders: [{
            id: 1,
            orderId: '122450',
            roClosure: '01/01/2013',
            location: 'MI',
            desc: "BODY REPAIR CITIZEN",
            count: '3',
            indicators: "C",
            mileage: "60,560 Miles"
        }, {
            id: 2,
            orderId: '122457',
            roClosure: '02/01/2013',
            location: 'MI',
            desc: "ELECTRICAL DEPT",
            count: '1',
            indicators: "C",
            mileage: "60,312 Miles"
        }, {
            id: 3,
            orderId: '705772',
            roClosure: '04/03/2014',
            location: 'MI',
            desc: "REPLACE 4 TIRES",
            count: '8',
            indicators: "C, I, W",
            mileage: "56949 Miles"
        }]
    };

    $scope.repairOrdersDefinition = [{
        columnHeaderDisplayName: 'RO CLOSURE DATE',
        displayProperty: 'roClosure',
        sortKey: 'roClosure',
        columnSearchProperty: 'roClosure'
    },{
        columnHeaderDisplayName: 'REPAIR ODER #',
        displayProperty: 'orderId',
        sortKey: 'orderId',
        columnSearchProperty: 'orderId'
    },{
        columnHeaderDisplayName: 'SERVICE LOCSTION',
        displayProperty: 'location',
        sortKey: 'location',
        columnSearchProperty: 'location'
    },{
        columnHeaderDisplayName: '1ST R.O. JOB DESCRIPTION TEXT',
        displayProperty: 'desc',
        sortKey: 'desc',
        columnSearchProperty: 'desc'
    }];

    // ========== ui handlers ========== //
    $scope.rowExpanded = function (order) {

    };
}]).
directive('orderMoreInfo', ['$timeout', function ($timeout) {
    return {
       ...