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

    <!-- content -->
    <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>Nama</th>
                            <th>Path</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- end content -->

    <script type="text/javascript" metal:fill-slot="scripts">
        var mID;
        var mThn;
        var oTable;
        var iPos;

        var oTableUri = "${home}/routes";
        var oTableUrl = oTableUri + "/grid/act";
        $(document).ready(function() {
            oTable = $('#table1').DataTable({
                dom: '<"row"<"col-md-8"<"toolbar">l><"col-md-4"f>>rtip',
                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, -1],
                    [10, 25, 50, 100, 'Semua']
                ],
                columnDefs: [{
                    searchable: false,
                    visible: false,
                    targets: [0]
                }],
                columns: [{
                        "data": "id"
                    },
                    {
                        "data": "kode",
                        "width": "200px",
                        "className": "text-left"
                    },
                    {
                        "data": "nama"
                    },
                    {
                        "data": "path",
                        "width": "200px",
                        "className": "text-left"
                    },
                    {
                        "data": "status",
                        "width": "200px",
                        "className": "text-center",
                        "render": function (data, type, full, meta){
                            if (data==0) return 'NonAktif';
                            else if (data==1) return 'Aktif';
                            else return "-";
                        } 
                    },
                ],
                "language": {
                    "search": "Cari: ",
                    "paginate": {
                        "first": "Pertama ",
                        "last": "Akhir ",
                        "previous": "",
                        "next": "",
                    },
                    "lengthMenu": "Tampil _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_edit"   class="btn btn btn-warning" type="button">Edit</button>',
                '   <button id="btn_delete" class="btn btn btn-danger"  type="button">Hapus</button>',
                '   <!--<button id="btn_csv"  class="btn btn btn-primary" type="button">CSV</button>',
                '   <button id="btn_pdf"  class="btn btn btn-primary" type="button">PDF</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;
                    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 + '/edit';
                else
                    $.SmartMessageBox({
                        title : "Edit",
                        content : "Pilih Baris yang akan di edit...",
                        buttons : '[Oke]'
                    });;
            });
		$('#btn_view').click(function() {
                if (mID) window.location = oTableUri + '/' + mID + '/view';
                else
                $.SmartMessageBox({
                    title : "View",
                    content : "Pilih Baris yang akan di lihat...",
                    buttons : '[Ok]'
                });;
            });

            $('#btn_delete').click(function() {
                if (mID) window.location = oTableUri + '/' + mID + '/delete';
                else
                    $.SmartMessageBox({
                        title : "Hapus",
                        content : "Pilih Baris yang akan di hapus...",
                        buttons : '[Oke]'
                    });
            });

            $('#btn_print').click(function() {
                url = '/admin/report/act/route?route=' + mID
                if (mID) window.open(url);
                else window.open('/admin/report/act/route2');
            });

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

</html>