list.pt 5.46 KB
<div metal:use-macro="load: ../main.pt">
  <!-- content -->
  <div metal:fill-slot="content">
    <div class="jarviswidget" style="border-top:1px solid #ccc!important">
      <div role="content">
        <table id="table1" class="table table-bordered table-hover table-condensed">
          <thead>
          <tr>
            <th>ID</th>
            <th>Email</th>
            <th>User Name</th>
            <th>Status</th>
            <th>Last Login</th>
            <th>Registered Date</th>
          </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <!-- end content -->
  <script type="text/javascript" metal:fill-slot="scripts">var mID;
  var mID;
  var oTable;
  var oTableUri = "${home}/user"
  var oTableUrl = oTableUri + "/grid/act";
  $(document).ready(function () {
    oTable = $('#table1').DataTable({
      dom: '<"row"<"col-md-8"<"toolbar">l><"col-md-4"f>>rtip',
      processing: true,
      serverSide: true,
      ajax: oTableUrl,
      stateSave: true,
      scrollCollapse: true,
      sort: true,
      info: false,
      filter: true,
      autoWidth: false,
      paginate: true,
      paginationType: "full_numbers",
      lengthMenu: [
        [10, 25, 50, 100],
        [10, 25, 50, 100]
      ],
      columnDefs: [{
        searchable: false,
        visible: false,
        targets: [0]
      }],
      columns: [{
        "data": "id"
      },
        {
          "data": "email",
          "width": "200px",
          "className": "text-left"
        },
        {
          "data": "name"
        },
        {
          "data": "status",
          "width": "200px",
          "className": "text-center",
          "render": function (data, type, full, meta) {
            if (data == 0) return 'NonAktif';
            else if (data == 1) return 'Aktif';
            else return "-";
          }
        },
        {
          "data": "last_login",
          "width": "200px",
          "className": "text-center"
        },
        {
          "data": "registered",
          "width": "200px",
          "className": "text-center"
        }
      ],
      "language": {
        "search": "Cari : ",
        "paginate": {
          "first": "Pertama ",
          "last": "Akhir ",
          "previous": "",
          "next": "",
        },
        "lengthMenu": "Tampil _MENU_ baris "
      },

    });

    var tb_array = [
      '<div class="btn-group pull-left">',
      '   <button id="btn_view" class="btn btn btn-warning"  type="button" data-toggle="tooltip" title="View"> <i class="fa fa-eye"></i></button>',
      '   <button tal:condition="has_permission(request, 'user-edit')" id="btn_add" class="btn btn btn-success" type="button" data-toggle="tooltip" title="Tambah"><i class="fa fa-plus"></i></button>',
      '   <button tal:condition="has_permission(request, 'user-edit')" id="btn_edit" class="btn btn btn-warning" type="button" data-toggle="tooltip" title="Koreksi"><i class="fa fa-edit"></i></button>',
      '   <button tal:condition="has_permission(request, 'user-edit')" id="btn_delete" class="btn btn btn-danger" type="button" data-toggle="tooltip" title="Hapus"><i class="fa fa-trash-o"></i></button>',
      '   <button id="btn_pdf" class="btn btn btn-primary" type="button" data-toggle="tooltip" title="PDF"><i class="fa fa-file-pdf-o"></i></button>',
      '   <button id="btn_csv" class="btn btn btn-primary" type="button" data-toggle="tooltip" title="CSV"><i class="fa fa-file-excel-o"></i></button>',
      '   <button id="btn_close" class="btn btn btn-warning" type="button" data-toggle="tooltip" title="Tutup"><i class="fa fa-arrow-right"></i></button>',
      '   &nbsp;',
      '</div>',
    ];

    var tb = tb_array.join(' ');
    $("div.toolbar").html(tb);
    $("div.toolbar").attr('style', 'display:block; float: left; margin-bottom:6px; line-height:16px;');
    $('#table1 tbody').on('click', 'tr', function () {
      if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
      } else {
        var aData = oTable.row(this).data();
        oTable.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
        mID = aData.id;
        oTable.$('tr.row_selected').removeClass('row_selected');
        $(this).addClass('row_selected');
      }
    });
    $('#btn_add').click(function () {
      window.location = oTableUri + '/add';
    });
    $('#btn_view').click(function () {
      if (mID) window.location = oTableUri + '/' + mID + '/view';
      else
        $.SmartMessageBox({
          title: "View",
          content: "Pilih Baris yang akan di lihat...",
          buttons: '[Ok]'
        });
      ;
    });
    $('#btn_edit').click(function () {
      if (mID) window.location = oTableUri + '/' + mID + '/edit';
      else
        $.SmartMessageBox({
          title: "Edit",
          content: "Pilih Baris yang akan di edit...",
          buttons: '[Ok]'
        });
      ;
    });
    $('#btn_delete').click(function () {
      if (mID) window.location = oTableUri + '/' + mID + '/delete';
      else
        $.SmartMessageBox({
          title: "Hapus",
          content: "Pilih Baris yang akan di hapus...",
          buttons: '[Ok]'
        });
    });
    $('#btn_csv').click(function () {
      url = oTableUri + "/csv/act";
      window.open(url);
    });
    $('#btn_pdf').click(function () {
      url = oTableUri + "/pdf/act";
      window.open(url);
    });
    $("#btn_close").click(function () {
      window.location = '/';
      return false;
    });
  });
  </script>
</div>