list.pt 6.71 KB
<html metal:use-macro="load: ../base.pt">
  <div metal:fill-slot="content">
      <link href="/static/datatables/media/css/dataTables.bootstrap.css" rel="stylesheet">
      <h4>Daftar BJB VA</h4>
      <div class="dataTables_wrapper form-inline no-footer">
      <form id="filter_form" method="POST" enctype="multipart/form-data" accept-charset="utf-8" class="form-inline">
          <div class="form-group">
            <label for="exampleInputName2">Tahun</label>
            <input class="form-control" id="tahun" name="tahun" type="text" value="${request.session['tahun']}"/>
          </div>
      </form>
          <div class="clearfix" style="margin-top:20px"></div>
          <div class="clearfix"></div>

            <table id="table1" class="table table-bordered table-hover table-condensed">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>No. VA</th>
                        <th>Kode Bayar</th>
                        <th>Deskripsi</th>
                        <th>Subjek Nama</th>
                        <th>Jumlah</th>
                        <th>Refnum</th>
                        <th>Expired Date</th>
                        <th>Tgl Bayar</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
          </div>

    <div id="form_cetak" class="modal fade" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="cuDialogLabel">Cetak Daftar Penerimaan Harian</h3>
          </div>
          <div class="modal-body form-group">
              <div class="input-group col-md-12">
                  <label class="control-label col-md-3">Pejabat</label>
                  <div class="col-md-7">
                  <input class="form-control" id="pejabat" type="text" >
                  <input type="hidden" class="form-control" name="id_pejabat" id="id_pejabat" >
                  </div>
              </div>
            <div class="clearfix" style="margin-top:20px"></div>
            <div class="clearfix"></div>
          </div>
          <div class="modal-footer">
              <div class="btn-group center-block" role="group">
                <button class="btn btn-primary" id="btn_pdf">Cetak</button>
              </div>
              <button class="btn" data-dismiss="modal" aria-hidden="true" id="batal">Batal</button>
          </div>
        </div>
      </div>
    </div>
    <script src="/static/datatables/media/js/jquery.dataTables.min.js"></script>
    <script src="/static/datatables/media/js/dataTables.bootstrap.js"></script>
    <script>
      var mID;
      var oTable;
      var oTableUri = "/bjbva"
      var oTableUrl = oTableUri+"/grid/act";

      $(document).ready(function () {
        oTable = $('#table1').DataTable({
          ajaxSource       : oTableUrl,
          //"bStateSave"     : true,
          serverSide       : true,
          "bProcessing"    : true,
          "sDom"           : '<"toolbar">lfrtip',
          "bScrollCollapse": true,
          "bSort"          : true,
          "bSearch"        : true,
          "bInfo"          : false,
          "bFilter"        : true,
          "bAutoWidth"     : false,
          "bPaginate"      : true,
          "sPaginationType": "full_numbers",

          lengthMenu: [
              [10, 25, 50, 100],
              [10, 25, 50, 100]
          ],
          columnDefs: [{
                        searchable: false,
                        visible: false,
                        targets: [0]
                    }],
          "language": {
                "search"  : "Cari: ",
                "paginate":{
                    "first"   : "Pertama ",
                    "last"    : "Akhir ",
                    "previous": false,
                    "next"    : false,
                },
                "lengthMenu": " _MENU_ baris "
            },
        });

        var tb_array = [
          '<div class="btn-group pull-left">',
          ' <button id="btn_add" class="btn btn btn-success" type="button">Create VA</button>',
          ' <button id="btn_edit" class="btn btn btn-warning" type="button">Update VA</button>',
          ' <button id="btn_update" class="btn btn btn-primary" type="button">Inquiry VA</button>',
          ' <button id="btn_va" class="btn btn btn-info" type="button">View VA</button>',
          ' <button id="btn_delete" class="btn btn btn-danger" type="button">Cancel VA</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[0];
                oTable.$('tr.row_selected').removeClass('row_selected');
                $(this).addClass('row_selected');
            }
        });

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

        $('#btn_edit').click(function () {
          if (mID) window.location = oTableUri+'/'+mID+'/edt';
          else
              alert("Pilih Baris yang akan di edit...");
        });

        $('#btn_delete').click(function () {
          if (mID) window.location = oTableUri+'/'+mID+'/del';
          else
              alert("Pilih Baris yang akan di hapus...");
        });

        $('#btn_update').click(function () {
          if (mID) {
            $.ajax({
              type: 'GET',
              url: oTableUri+'/update/act',
              dataType: 'json',
              data : { 
                      term : mID
                  },
              success: function(data) {
                oTable.ajax.url(oTableUrl).load();
              }
            
            });
          }
          else
              alert("Pilih Baris yang akan di inquiry...");
        });
        
        $("#btn_close").click(function () {
            window.location = '/';
            return false;
        });


        $("#btn_va").click(function () {
            if (mID) window.open(oTableUri+"/vacode/act?id="+mID,"_blank","width=350,height=350");
            else
                alert("Pilih Baris yang akan di lihat...");
        });

      });
    </script>
  </div>
</html>