index.phtml

<?php

/**
 *
 * bareos-webui - Bareos Web-Frontend
 *
 * @link      https://github.com/bareos/bareos-webui for the canonical source repository
 * @copyright Copyright (c) 2013-2015 Bareos GmbH & Co. KG (http://www.bareos.org/)
 * @license   GNU Affero General Public License (http://www.gnu.org/licenses/)
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */

$title = 'Clients';
$this->headTitle($title);

?>

<div class="row">

<div class="col-md-12">
<div class="panel panel-default">

<div class="panel-heading">
<h3 class="panel-title">Clients</h3>
</div>

<div class="panel-body">

<table class="table table-hover" id="clients">

<thead class="bg-primary">
   <th><?php echo $this->translate("Name"); ?></th>
   <th><?php echo $this->translate("Version"); ?></th>
   <th><?php echo $this->translate("Actions"); ?></th>
</thead>

</table>

</div>
</div>
</div>
</div>

<?php
   echo $this->headScript()->prependFile($this->basePath() . '/js/jquery.dataTables.min.js');
   echo $this->headScript()->prependFile($this->basePath() . '/js/dataTables.bootstrap.min.js');
   echo $this->headLink()->prependStylesheet($this->basePath() . '/css/dataTables.bootstrap.min.css');
?>

<script>

$(document).ready(function() {

   var table= $('#clients').DataTable( {
      "ajax": {
         "url": "<?php echo $this->url('client', array('action' => 'getData'), null) . '?data=all'; ?>",
         "dataSrc": ""
      },
      "columns" : [
         {
            "className": "client-name",
            "orderable": true,
            "data": "name"
         },
         {
            "className": "client-uname",
            "orderable": true,
            "data": "uname"
         },
         {
            "className": "actions",
            "orderable": false,
            "data": "name"
         }
      ],
      "paging":   true,
      "ordering": true,
      "info":     true,
      "pagingType": "full_numbers",
      "stateSave": true,
      "order": [[0, 'asc']],
      "columnDefs": [
         {
            "targets": 0,
            "data": "name",
            "render": function(data, type, full, meta) {
               return '<a href="<?php echo $this->basePath() . '/client/details/'; ?>'+data+'">'+data+'</a>';
            }
         },
         {
            "targets": 2,
            "render": function(data, type, full, meta) {
               return '<a href="<?php echo $this->basePath() . '/restore/index?type=client&client='; ?>'+data+'"><button type="button" class="btn btn-default btn-xs" id="btn-1" data-toggle="tooltip" data-placement="top" title="Restore"><span class="glyphicon glyphicon-import"></span></button></a>';
            }
         }
      ]
   } );

   $('#clients tbody').on('mouseover', '#btn-1', function () {
      $('[data-toggle="tooltip"]').tooltip();
   })


} );

</script>