list.pt 6.24 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>Group ID</th>
                            <th>Route ID</th>
                            <th>Group Nama</th>
                            <th>Route Nama</th>
                            <th>Path</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- end content -->

    <script type="text/javascript" metal:fill-slot="scripts">
        var mID;
        var mID2;
        var mThn;
        var oTable;
        var iPos;
        var oTableUrl = "${home}/group/routes/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,
                stateDuration: 1,
                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": "group_id",
                        "visible": false,
                        "orderable": false,
                        "searchable": false
                    },
                    {
                        "data": "route_id",
                        "visible": false,
                        "orderable": false,
                        "searchable": false
                    },
                    {
                        "data": "group_nama",
                        "width": "200px",
                        "className": "text-left"
                    },
                    {
                        "data": "route_nama",
                        "width": "200px",
                        "className": "text-left"
                    },
                    {
                        "data": "route_path"
                    },
                ],
                "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_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.group_id;
                    mID2 = aData.route_id;
                    oTable.$('tr.row_selected').removeClass('row_selected');
                    $(this).addClass('row_selected');

                }
            });

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

            $('#btn_edit').click(function() {
                if (mID && mID2) window.location = '/group/routes/' + mID + '/' + mID2 + '/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 && mID2) window.location = '/group/routes/' + mID + '/' + mID2 + '/delete';
                else 
                    $.SmartMessageBox({
                        title : "Hapus",
                        content : "Pilih Baris yang akan di hapus...",
                        buttons : '[Oke]'
                    });
            });

            // $('#btn_print').click(function() {
            //     url = '/admin/report/act/guper'
            //     window.open(url);
            // });

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

</html>