list.pt 12.4 KB
<html metal:use-macro="load: ../base.pt">

<div metal:fill-slot="content">
  <link href="/static/datatables/extensions/TableTools/css/dataTables.tableTools.min.css" rel="stylesheet">
  <link href="/static/datatables/media/css/dataTables.bootstrap.css" rel="stylesheet">

<h4>Fast Register</h4>
<hr>
<div class="container">
</div>
<p>
<table id="table1" name="table1" class="table table-bordered table-hover table-condensed" >
    <thead>
        <tr>
            <th>ID</th>
            <th>Kode</th>
            <th>Penyetor</th>
            <th>Pajak</th>
            <th>Uraian</th>
            <th>Rekening</th>
            <th>Jumlah</th>
            <th>OPD</th>
            <th>TBP</th>
            <th>STS</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<script src="/static/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="/static/datatables/media/js/jquery.dataTables.ext.js"></script>
<script src="/static/datatables/extensions/TableTools/media/js/ZeroClipboard.js"></script>
<script src="/static/datatables/media/js/dataTables.bootstrap.js"></script>
<script>
  var mID;  
  var oTable;
  var iPos;
  var oFormUrl  = "/fast-pay/";
  var oTableUrl = oFormUrl+"grid/act";
  $.fn.dataTable.ext.search.push(
      function( oSettings, aData, iDataIndex ) {
          var iFini = document.getElementById('awal').value;
          var iFfin = document.getElementById('akhir').value;
          var iStartDateCol = 6;
          var iEndDateCol   = 7;
          
          alert(iFini);
          iFini=iFini.substring(6,10) + iFini.substring(3,5)+ iFini.substring(0,2);
          iFfin=iFfin.substring(6,10) + iFfin.substring(3,5)+ iFfin.substring(0,2);
   
          var datofini = aData[iStartDateCol].substring(6,10) + aData[iStartDateCol].substring(3,5) + aData[iStartDateCol].substring(0,2);
          var datoffin = aData[iEndDateCol].substring(6,10)   + aData[iEndDateCol].substring(3,5)   + aData[iEndDateCol].substring(0,2);
   
          if ( iFini === "" && iFfin === "" )
          {
              return true;
          }
          else if ( iFini <= datofini && iFfin === "")
          {
              return true;
          }
          else if ( iFfin >= datoffin && iFini === "")
          {
              return true;
          }
          else if (iFini <= datofini && iFfin >= datoffin)
          {
              return true;
          }
          return false;
      }
  );
  $(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]
          ],
          "aoColumnDefs": [
              {"bSearchable": false, "bVisible": false, "aTargets": [0]},
              {
                "aTargets" : [8], // TBP
                "bSearchable": false,
                "bSortable": false,
                "mRender"  : function (data, type, full) {
                    if (data == "0") {
                        return 'N';
                    } else if (data == "1") {
                        return 'Y';
                    }
                }
              },{
                "aTargets" : [9], // STS
                "bSearchable": false,
                "bSortable": false,
                "mRender"  : function (data, type, full) {
                    if (data == "0") {
                        return 'N';
                    } else if (data == "1") {
                        return 'Y';
                    }
                }
              }
          ],

          "aoColumns": [
              null, 
              {"sWidth": "100px", "sClass": "left"},
              {"sWidth": "30px", "sClass": "center"},
              {"sWidth": "30px", "sClass": "center"},
              null, 
              null,
              {"sWidth": "75px", "sClass": "right"},
              null,
              {"sWidth": "6px", "sClass": "center"},
              {"sWidth": "6px", "sClass": "center"},
          ],
            "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                $(nRow).on("click", function (event) {
                    if ($(this).hasClass('row_selected')) {
                        /* mID = '';
                        $(this).removeClass('row_selected'); */
                    } else {

                        var data = oTable.fnGetData(this);

                        oTable.$('tr.row_selected').removeClass('row_selected');
                        $(this).addClass('row_selected');
                    }
                })
                //Kondisi Background-color TBP
                switch(aData[8]){
                    case '1' :
                        $('td',nRow).css("background-color","#AFEEEE")
                        break;
                }
                //Kondisi Background-color STS
                switch(aData[9]){
                    case '1' :
                        $('td',nRow).css("background-color","#ddffdd")
                        break;
                }
            },
            "language": {
                "search"  : "Cari: ",
                "paginate":{
                    "first"   : "Pertama ",
                    "last"    : "Terakhir ",
                    "previous": "Sebelumnya ",
                    "next"    : "Selanjutnya ",
                },
                "lengthMenu": "Tampil _MENU_ baris "
            }
      });

      var tb_array = [
          '<div class="btn-group pull-left">',
          '	<button id="btn_tambah" class="btn btn btn-primary pull-left" type="button">Tambah</button>',
          '	<button id="btn_edit"   class="btn btn btn-primary pull-left" type="button">Edit</button>',
          '	<button id="btn_delete" class="btn btn btn-danger  pull-left" type="button">Hapus</button>',
          '	<button id="btn_print"  class="btn btn btn-primary pull-left" type="button">Cetak</button>',
          '	<button id="btn_print1" class="btn btn btn-info    pull-left" type="button">Kwitansi</button>',
          '	<button id="btn_posting" class="btn btn btn-success pull-left" type="button">Posting</button>',
          '	<button id="btn_close"  class="btn btn btn-warning"           type="button">Tutup</button>',
          '	<label class="pull-left">Periode',
          '   <input id="awal" class="input-sm " type="text" value="${rows.awal}">',
          '	  s.d <input id="akhir" class="input-sm " type="text" value="${rows.akhir}">',
          ' </label>',
          '	<button id="btn_pdf" class="btn btn btn-success pull-left" type="button">PDF</button>',
          '	<button id="btn_csv" class="btn btn btn-info pull-left"    type="button">CSV</button>',
          '	&nbsp;',
          '</div>',
      ];

      var tb = tb_array.join(' ');
      $("div.toolbar").html(tb);

      var tb_periode = [
      ];

      var tb = tb_periode.join(' ');
      $("div.periode").html(tb);
//      $('#awal, #akhir').pickadate({
//            "selectMonths": true, 
//            "submitFormat": "yyyy-mm-dd", 
//            "selectYears": true, 
//            "format": "yyyy-mm-dd"
//      });
      /*
      $('#awal').click(
          function(){
            if (!Modernizr.inputtypes['date'] ||
                "date" != "date"){
              $('#awal').pickadate({"selectMonths": true,
                "submitFormat": "yyyy-mm-dd", 
                "selectYears": true, "format": "yyyy-mm-dd"});
            }
          }
      );
      $('#akhir').click(
          function(){
            if (!Modernizr.inputtypes['date'] ||
                "date" != "date"){
              $('#akhir').pickadate({"selectMonths": true,
                "submitFormat": "yyyy-mm-dd", 
                "selectYears": true, "format": "yyyy-mm-dd"});
            }
          }
      );
      */
      //$( "#awal" ).datepicker({
      //  dateFormat : 'dd-mm-yy',
      //  defaultDate: "+1w",
      //  changeMonth: true,
      //  changeYear : true,
      //  onClose    : function( selectedDate ) {
      //    //alert(oTable.ajaxSource); 
      //  },
      //  onSelect: function(selectedDate) {
      //    $( "#akhir" ).datepicker( "option", "minDate", selectedDate );
      //        oTable.ajax.url(oTableUrl + '?awal='+$( "#awal" ).val()+'&akhir='+$( "#akhir" ).val());
      //        oTable.draw();
      //  }   
      //});
      //
      //$( "#akhir" ).datepicker({
      //  dateFormat : 'dd-mm-yy',
      //  defaultDate: "+1w",
      //  changeMonth: true,
      //  changeYear : true,
      //  onClose    : function( selectedDate ) {
      //    //alert(oTable.ajaxSource); 
      //  },
      //  onSelect: function(selectedDate) {
      //        $( "#awal" ).datepicker( "option", "maxDate", selectedDate );
      //        oTable.ajax.url(oTableUrl + '?awal='+$( "#awal" ).val()+'&akhir='+$( "#akhir" ).val());
      //        oTable.draw();
      //  }
      //});
      
      $('#awal').pickadate({"selectMonths" : true,
                            "submitFormat" : "yyyy-mm-dd", 
                            "selectYears"  : true, 
                            "format"       : "yyyy-mm-dd"});
      $('#akhir').pickadate({"selectMonths": true,
                             "submitFormat": "yyyy-mm-dd", 
                             "selectYears" : true, 
                             "format"      : "yyyy-mm-dd"});
      
      $('#awal, #akhir').change(function(){
        oTableUrl = oFormUrl+"grid/act?awal="+$('#awal').val()+"&akhir="+$('#akhir').val();
        oTable.ajax.url(oTableUrl).load();
      });

      $('#table1 tbody').on('click', 'tr', function () {
          if ($(this).hasClass('selected')) {
              mID = '';
              $(this).removeClass('selected');
          } else {
              //iPos = oTable.fnGetPosition(this);
              //var aData = oTable.fnGetData(iPos);
              var aData = oTable.row( this ).data();
              mID = aData[0];
              oTable.$('tr.selected').removeClass('selected');
              $(this).addClass('selected');
          }
      });

      $('#btn_tambah').click(function () {
          window.location = oFormUrl+'add';
      });

      $('#btn_edit').click(function () {
          if (mID) {
              window.location = oFormUrl+mID+'/edit';
          } else {
              alert('Silahkan pilih data yang akan diedit');
          }
      });

      $('#btn_print').click(function () {
          url = "/reports/act/r101?id="+mID;
          if (mID) {
                 window.open(url);
          } else {
              alert('Silahkan pilih Kode Bayar');
          }
      });

      $('#btn_posting').click(function () {
          url = oFormUrl+'posting?awal='+$('#awal').val()+"&akhir="+$('#akhir').val();
          window.location = url;
      });

      $('#btn_print1').click(function () {
          if (mID) {
              url = oFormUrl+'cetak/pdf?awal='+$('#awal').val()+"&akhir="+$('#akhir').val()+"&id1="+mID;
              window.open(url);
          } else {
              alert('Silahkan pilih data yang akan dicetak kwitansinya.');
          }
      });

      $('#btn_csv').click(function () {
          url = oFormUrl+'reg/csv?awal='+$('#awal').val()+"&akhir="+$('#akhir').val();
          window.open(url);
      });

      $('#btn_pdf').click(function () {
          url = oFormUrl+'reg/pdf?awal='+$('#awal').val()+"&akhir="+$('#akhir').val();
          window.open(url);
      });
      
      $('#btn_close').click(function () {
          window.location = "/"
      });

      $('#btn_delete').click(function () {
          if (mID) {
              var hapus = confirm('Hapus data ini?');
              if (hapus == true) {
                  window.location = oFormUrl+mID+'/delete';
              };
          } else {
              alert('Silahkan pilih data yang akan dihapus');
          }
      });
  });
</script>

</div>
</html>