list.pt 4.32 KB
<html metal:use-macro="load: ../base.pt">
  <div metal:fill-slot="content">
    <h4>${request.title}</h4>
    <hr>
    <table id="table1" class="table table-bordered table-hover table-condensed">
        <thead>
            <tr>
                <th>ID</th>
                <th>Tahun</th>
                <th>Kode</th>
                <th>Uraian</th>
                <th>Amt. Tahun</th>
                <th>Amt. Bulan</th>
                <th>Amt. Minggu</th>
                <th>Amt. Hari</th>
                <th>Order</th>
                <th>Status</th>
                <th>Aktif</th>
                <th>Tgl.Update</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
  </div>
  
  <div metal:fill-slot="scripts">
    <script>
      var mID;
      var mThn;
      var oTable;
      var oTableUrl = "/eis/carousel/grid/act";

      $(document).ready(function () {
        oTable = $('#table1').DataTable({
          dom           : '<"toolbar">lfrtip',
          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: [
              null,
              {"width": "50px"},
              {"width": "60px"},
              {"width": "350px", "sClass":"left"},
              {"width": "100px", "sClass":"right"},
              {"width": "100px", "sClass":"right"},
              {"width": "100px", "sClass":"right"},
              {"width": "100px", "sClass":"right"},
              {"width": "40px", "sClass":"center"},
              {"width": "40px", "sClass":"center"},
              {"width": "40px", "sClass":"center"},
              {"width": "75px", "sClass":"center"},
          ],
          "language": {
                "search"  : "Cari: ",
                "paginate":{
                    "first"   : "Pertama ",
                    "last"    : "Akhir ",
                    "previous": "Mundur ",
                    "next"    : "Maju ",
                },
                "lengthMenu": "Tampil _MENU_ baris "
            },

        });

          
        var tb_array = [
          '<div class="btn-carousel pull-left">',
          '	<button id="btn_add" class="btn btn btn-primary" type="button">Tambah</button>',
          '	<button id="btn_edit" class="btn btn btn-primary" type="button">Edit</button>',
          '	<button id="btn_delete" class="btn btn btn-danger" type="button">Hapus</button>',
          '	<!--button id="btn_pdf" class="btn btn btn-warning" type="button">PDF</button-->',
          '	<button id="btn_csv" class="btn btn btn-default" type="button">CSV</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 = '/eis/carousel/add';
        });

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

        $('#btn_delete').click(function () {
            if (mID) window.location = '/eis/carousel/'+mID+'/delete';
            else alert('Pilih Baris yang akan di hapus');
        });
        })
    </script>
  </div>
</html>