Table AJAX Demo

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

by ipanns

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="tableajaxCtrl">

  <!-- ========== template files ========== -->
  <script type="text/ng-template" id="src/tableajax/docs/artistPicture.html">
    <span>
            <img class="thumbnail ad-margin-bottom-none" 
            ng-src="{{item.image[1]['#text']}}"/>
        </span>
  </script>

  <script type="text/ng-template" id="src/tableajax/docs/artistMoreInfo.html">
    <div>
      <h4>More Info</h4>
      <p><strong>Name: </strong>{{ item.name }}</p>
      <p><strong>Listeners: </strong>{{ item.listeners|number }}</p>
    </div>
  </script>

  <!-- ========== Simple Table Implementation ========== -->
  <div class="panel panel-default">
    <div class="panel-body">
      <ad-table-ajax table-name="artistsTable" column-definition="artistsColumnDef" table-classes="table table-bordered" page-sizes="[5, 20, 50]" pagination-btn-group-classes="pagination pagination-xs" items-not-found-message="Artists Not Found" ajax-config="artistsAjaxConfig">
      </ad-table-ajax>
    </div>
  </div>

  <!--========== Advanced Implementation with search ========== -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <div class="row">
        <div class="col-lg-6">
          <div class="input-group">
            <input type="text" class="form-control" ng-change="searchArtist()" ng-model="artistSearchKey" />
            <span class="input-group-addon">
                          <i class="glyphicon glyphicon-search"></i>
                        </span>
          </div>
   ...

JavaScript

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

  // ========== controllers ========== //
  .controller('tableajaxCtrl', ['$scope',
    function($scope) {

      // ========== Simple Table Implementation ========== //
      $scope.artistsColumnDef = [{
          columnHeaderDisplayName: 'Image',
          template: '<img class="thumbnail ad-margin-bottom-none" ng-src="{{item.image[1][\'#text\']}}">',
          width: '7em'
        },
        {
          columnHeaderTemplate: '<em>Name</em>',
          displayProperty: 'name'
        }
      ];
      $scope.artistsAjaxConfig = {
        url: 'http://ws.audioscrobbler.com/2.0/',
        method: 'JSONP',
        params: {
          api_key: '9b0cdcf446cc96dea3e747787ad23575',
          artist: '50 cent',
          method: 'artist.search',
          format: 'json'
        },
        paginationConfig: {
          response: {
            totalItems: 'results.opensearch:totalResults',
            itemsLocation: 'results.artistmatches.artist'
          }
        }
      };

      // ========== Advanced Implementation with search ========== //
      $scope.artistsColumnDefSearch = [{
          columnHeaderTemplate: '<em>Picture</em>',
          templateUrl: 'src/tableajax/docs/artistPicture.html',
          width: '7em'
        },
        {
          columnHeaderDisplayName: 'Name',
          displayProperty: 'name'
        },
        {
          columnHeaderDisplayName: 'Profile',
          template: '<a href="{{ item.url }}" target="_blank">url</a>'
        }
      ];
      $scope.artistsAjaxConfigSearch = {
        url: 'http://ws.audioscrobbler.com/2.0/',
        method: 'JSONP',
        params: {
          api_key: '9b0cdcf446cc96dea3e747787ad23575',
          artist: '50 cent',
          method: 'artist.search',
          format: 'json'
        },
        paginationConfig: {
          response: {
           ...