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

    <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>Vendor</th>
                          <th>Customer</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 = "${request._host}/api/partner";
      var oTableUri = oTableUrl+"/grid/act";
      $(document).ready(function () {
        oTable = $('#table1').DataTable({
          dom           : '<"row"<"col-md-8"<"toolbar">Bl><"col-md-4"fr>>tip',
          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": "150px", "class":"left"},
              { "data": "nama" },
              { "data": "is_vendor", "width": "100px", "class":"left" },
              { "data": "is_customer", "width": "100px", "class":"left" },
              { "data": "status", "width": "100px", "class":"center"}
          ],
          "language": {
                "search"  : "Cari: ",
                "paginate":{
                    "first"   : "Awal ",
                    "last"    : "Akhir ",
                    "previous": "Mundur ",
                    "next"    : "Maju ",
                },
                "lengthMenu": " _MENU_ baris "
            }    
        });

        var tb_array = [
          '<div class="btn-group pull-left">',
          '	<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_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>