list.pt 5.1 KB
<html metal:use-macro="load: ../base3.1.pt">
<link metal:fill-slot="css_files" rel="stylesheet" type="text/css" media="screen"
                                  href="/static/v3/css/custom-datatable.css">
<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>Kode</th>
          <th>Uraian</th>
          <th>Singkat</th>
          <th>Eselon</th>
          <th>Jenis</th>
          <th>Status</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>
</div>
<div metal:fill-slot="scripts">
  <script>
    var mID;
    var mThn;
    var oTable;
    var iPos;
    var oTableUrl = "${home}/jabatan";
    var oTableUri = oTableUrl + "/grid/act";
    $(document).ready(function () {
      oTable = $('#table1').DataTable({
        dom: '<"toolbar">lfrtip',
        processing: true,
        serverSide: true,
        ajax: oTableUri,
        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": "kode", "width": "100px", "class": "left"},
          {"data": "nama"},
          {"data": "nama_pendek"},
          {"data": "eselon"},
          {
            "data": "jenis", "width": "100px", "class": "left",
            "render": function (data, type, full, meta) {
              if (data == 1) return 'Struktural';
              else if (data == 2) return 'Fungsional';
              else if (data == 3) return 'Keuangan';
              else return "-";
            }
          },
          {
            "data": "status", "width": "100px", "class": "center",
            "render": function (data, type, full, meta) {
              if (data == 1) return 'Aktif';
              else if (data == 0) return 'Pasif';
              else return "-";
            }
          }
        ],
        "language": {
          "search": "Cari: ",
          "paginate": {
            "first": "Awal ",
            "last": "Akhir ",
            "previous": "",
            "next": "",
          },
          "lengthMenu": " _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 id="btn_add" class="btn btn btn-success" type="button">Tambah</button>',
        '	<button id="btn_edt" class="btn btn btn-warning" type="button">Koreksi</button>',
        '	<button id="btn_del" class="btn btn btn-danger" type="button">Hapus</button>',
        '	<button id="btn_print" class="btn btn btn-primary" type="button">Cetak</button>',
        '	<button id="btn_csv" class="btn btn btn-primary" type="button">CSV</button>',
        '	<button id="btn_close" class="btn btn btn-warning" type="button">Tutup</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;
          console.log(mID);
          //oTable.$('tr.row_selected').removeClass('row_selected');
          //$(this).addClass('row_selected');
        }
      });

      $('#btn_add').click(function () {
        window.location = oTableUrl + '/add';
      });

      $('#btn_edt').click(function () {
        if (mID) window.location = oTableUrl + '/' + mID + '/edit';
        else alert('Pilih Baris yang akan di koreksi');
      });
      $('#btn_view').click(function () {
        if (mID) window.location = oTableUrl + '/' + mID + '/view';
        else
          $.SmartMessageBox({
            title: "View",
            content: "Pilih Baris yang akan di lihat...",
            buttons: '[Ok]'
          });
        ;
      });

      $('#btn_del').click(function () {
        if (mID) window.location = oTableUrl + '/' + mID + '/delete';
        else alert('Pilih Baris yang akan di hapus');
      });

      $('#btn_print').click(function () {
        url = oTableUrl + "/pdf/rpt";
        window.open(url);
      });
      $('#btn_csv').click(function () {
        url = oTableUrl + "/csv/rpt";
        window.open(url);
      });

      $("#btn_close").click(function () {
        window.location = '/';
        return false;
      });
    })
  </script>
</div>
</html>