<div class="page page-datatables">




  <!-- page header -->
  <div class="pageheader">

    <h2>{{page.title}} <span>// {{page.subtitle}}</span></h2>

    <div class="page-bar">

      <ul class="page-breadcrumb">
        <li>
          <a ui-sref="app.dashboard"><i class="fa fa-home"></i> {{main.title}}</a>
        </li>
        <li>
          <a href="javascript:;">Tables</a>
        </li>
        <li>
          <a ui-sref="app.tables.datatables">{{page.title}}</a>
        </li>
      </ul>

    </div>

  </div>
  <!-- /page header -->






  <!-- page content -->
  <div class="pagecontent">


    <!-- row -->
    <div class="row">
      <!-- col -->
      <div class="col-md-12">


        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen01">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Basic</strong> Usage</h1>
            <div class="note"><strong>including:</strong> multi-column sorting, row select and colReorder</div>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen01 = !isFullscreen01">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body" ng-controller="BasicDatatableCtrl as showcase">
            <table datatable="" dt-options="showcase.dtOptions" dt-columns="showcase.dtColumns" class="table table-custom"></table>
          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->


        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen02">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Change </strong>Data</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen02 = !isFullscreen02">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body table-custom" ng-controller="ChangeDatatableCtrl as showCase">
            <form class="form-inline" ng-submit="showCase.addPerson()">
              <table datatable="ng" dt-options="showCase.dtOptions" dt-column-defs="showCase.dtColumnDefs" class="table table-custom">
                <thead>
                  <tr>
                    <th class="b-0">
                      <div class="form-group">
                        <label>
                          <input autofocus="" class="form-control input-sm" type="number" name="id" ng-model="showCase.person2Add.id" value="">
                        </label>
                      </div>
                    </th>
                    <th class="b-0">
                      <div class="form-group">
                        <label>
                          <input type="text" class="form-control input-sm" name="firstName" ng-model="showCase.person2Add.firstName" value="">
                        </label>
                      </div>
                    </th>
                    <th class="b-0">
                      <div class="form-group">
                        <label>
                          <input type="text" class="form-control input-sm" name="lastName" ng-model="showCase.person2Add.lastName" value="">
                        </label>
                      </div>
                    </th>
                    <th class="b-0">
                      <div class="form-group">
                        <button type="submit" class="btn btn-sm btn-default">Add to table</button>
                      </div>
                    </th>
                  </tr>
                  <tr>
                    <th class="bt-0">ID</th>
                    <th class="bt-0">FirstName</th>
                    <th class="bt-0">LastName</th>
                    <th class="bt-0"></th>
                  </tr>
                </thead>
                <tbody>
                  <tr ng-repeat="person in showCase.persons">
                    <td>{{ person.id }}</td>
                    <td>{{ person.firstName }}</td>
                    <td>{{ person.lastName }}</td>
                    <td>
                      <a href ng-click="showCase.modifyPerson($index)" class="text-success text-uppercase text-strong text-sm mr-10">Save</a>
                      <a href ng-click="showCase.removePerson($index)" class="text-danger text-uppercase text-strong text-sm mr-10">Remove</a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </form>
          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->


        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen03">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Responsive </strong>Table</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen03 = !isFullscreen03">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body"  ng-controller="ResponsiveDatatableCtrl as showCase">

            <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="table table-custom"></table>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->



        <!-- tile -->
        <section class="tile" fullscreen="isFullscreen04">

          <!-- tile header -->
          <div class="tile-header dvd dvd-btm">
            <h1 class="custom-font"><strong>Advanced </strong>Datatable</h1>
            <ul class="controls">
              <li class="dropdown" uib-dropdown on-toggle="toggled(open)">

                <a href uib-dropdown-toggle class="dropdown-toggle settings"><i class="fa fa-cog"></i></a>

                <ul class="dropdown-menu pull-right with-arrow animated littleFadeInUp">
                  <li>
                    <a href tile-control-toggle>
                      <span class="minimize"><fa name="angle-down"></fa>&nbsp;&nbsp;&nbsp;Minimize</span>
                      <span class="expand"><fa name="angle-up"></fa>&nbsp;&nbsp;&nbsp;Expand</span>
                    </a>
                  </li>
                  <li>
                    <a href tile-control-refresh ng-click="ajaxFaker()">
                      <fa name="refresh"></fa> Refresh
                    </a>
                  </li>
                  <li>
                    <a href tile-control-fullscreen ng-click="isFullscreen04 = !isFullscreen04">
                      <fa name="expand"></fa> Fullscreen
                    </a>
                  </li>

                </ul>

              </li>
              <li class="remove"><a href tile-control-close><i class="fa fa-times"></i></a></li>
            </ul>
          </div>
          <!-- /tile header -->

          <!-- tile body -->
          <div class="tile-body" ng-controller="AdvancedDatatableCtrl as showCase">

            <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="table table-custom"></table>

          </div>
          <!-- /tile body -->

        </section>
        <!-- /tile -->



      </div>
      <!-- /col -->
    </div>
    <!-- /row -->



  </div>
  <!-- /page content -->




</div>
