{"id":1830,"date":"2025-09-11T06:32:10","date_gmt":"2025-09-11T06:32:10","guid":{"rendered":"https:\/\/balecatursid.slemankab.go.id\/home\/?page_id=1830"},"modified":"2026-03-30T04:01:23","modified_gmt":"2026-03-30T04:01:23","slug":"aparatur-kalurahan","status":"publish","type":"page","link":"https:\/\/balecatursid.slemankab.go.id\/home\/aparatur-kalurahan\/","title":{"rendered":"Aparatur Kalurahan"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">    <table id=\"aparatur-desa-table\" class=\"display\" style=\"width:100%\">\n        <thead>\n            <tr>\n                <th>Foto<\/th>\n                <th>Nama<\/th>\n                <th>Jabatan<\/th>\n                <th>Jenis Kelamin<\/th>\n                <th>Pendidikan<\/th>\n                <th>Usia<\/th>\n                <th>Detail<\/th>\n            <\/tr>\n        <\/thead>\n        <tbody><\/tbody>\n    <\/table>\n    <!-- Modal -->\n    <div id=\"detailModal\" style=\"display:none;\">\n        <div id=\"modalBox\">\n            <button id=\"closeModal\" aria-label=\"Tutup\">&times;<\/button>\n            <div id=\"modalContent\"><\/div>\n        <\/div>\n    <\/div>\n    <style>\n    #detailModal {\n        position: fixed;\n        top: 0; left: 0; right: 0; bottom: 0;\n        background: rgba(0,0,0,0.4);\n        z-index: 9999;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n    #modalBox {\n        background: #fff;\n        border-radius: 16px;\n        box-shadow: 0 8px 32px #0002;\n        max-width: 420px;\n        width: 90vw;\n        padding: 32px 24px 24px 24px;\n        position: relative;\n        animation: modalIn .2s;\n        max-height: 80vh;\n        display: flex;\n        flex-direction: column;\n    }\n    #modalContent {\n        overflow-y: auto;\n        max-height: 60vh;\n    }\n    #closeModal {\n        position: absolute;\n        top: 12px; right: 16px;\n        background: #eee;\n        border: none;\n        border-radius: 50%;\n        width: 32px; height: 32px;\n        font-size: 22px;\n        cursor: pointer;\n        transition: background 0.2s;\n    }\n    #closeModal:hover { background: #f44336; color: #fff; }\n    #modalContent b { color: #0D8ABC; }\n    #modalContent ul { margin: 8px 0 0 18px; }\n    @keyframes modalIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n\n    \/* Table enhancements *\/\n    #aparatur-desa-table {\n        background: #fff;\n        border-radius: 14px;\n        box-shadow: 0 4px 24px #0001;\n        overflow: hidden;\n        margin-bottom: 32px;\n        padding-top: 16px;\n    }\n    #aparatur-desa-table thead th {\n        background: #0D8ABC;\n        color: #fff;\n        font-weight: 600;\n        border: none;\n        padding: 14px 8px;\n    }\n    #aparatur-desa-table tbody tr {\n        transition: background 0.2s;\n    }\n    #aparatur-desa-table tbody tr:hover {\n        background: #f0f8ff;\n    }\n    #aparatur-desa-table td, #aparatur-desa-table th {\n        border: none;\n        padding: 12px 8px;\n        vertical-align: middle;\n    }\n    #aparatur-desa-table .btn-detail {\n        background: #0D8ABC;\n        color: #fff;\n        border: none;\n        border-radius: 6px;\n        padding: 6px 16px;\n        font-size: 14px;\n        cursor: pointer;\n        transition: background 0.2s, box-shadow 0.2s;\n        box-shadow: 0 2px 8px #0d8abc22;\n    }\n    #aparatur-desa-table .btn-detail:hover {\n        background: #0a6e8a;\n        box-shadow: 0 4px 16px #0d8abc33;\n    }\n    .dataTables_wrapper .dataTables_paginate .paginate_button {\n        border-radius: 6px !important;\n        margin: 0 2px;\n        border: none !important;\n        background: #f0f8ff !important;\n        color: #0D8ABC !important;\n        transition: background 0.2s;\n    }\n    .dataTables_wrapper .dataTables_paginate .paginate_button.current,\n    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {\n        background: #0D8ABC !important;\n        color: #fff !important;\n    }\n    .dataTables_wrapper .dataTables_filter input {\n        border-radius: 6px;\n        border: 1px solid #0D8ABC;\n        padding: 4px 10px;\n    }\n    <\/style>\n    <script>\n    jQuery(document).ready(function($){\n        $.getJSON(aparatur_desa_ajax.ajax_url, function(data){\n            var table = $('#aparatur-desa-table').DataTable({\n                data: data,\n                columns: [\n                    { data: 'profile', render: function(d){ return '<img loading=\"lazy\" decoding=\"async\" src=\"'+d+'\" width=\"40\" height=\"40\" style=\"object-fit:cover;border-radius:50%\"\/>'; } },\n                    { data: 'nama' },\n                    { data: 'jabatan' },\n                    { data: 'jenis_kelamin' },\n                    { data: 'pendidikan_terakhir', render: function(d){ return d.tingkat+'<br>'+d.jurusan; } },\n                    { data: 'usia' },\n                    { data: null, render: function(d, t, r, i){\n                        return '<button class=\"btn-detail\" data-idx=\"'+i.row+'\">Detail<\/button>';\n                    }}\n                ]\n            });\n            $('#aparatur-desa-table tbody').on('click', '.btn-detail', function(){\n                var idx = $(this).data('idx');\n                var row = table.row(idx).data();\n                var html = '<div style=\"text-align:center;margin-bottom:18px;\">' +\n                           '<img decoding=\"async\" src=\"'+row.profile+'\" alt=\"Foto\" style=\"width:80px;height:80px;object-fit:cover;border-radius:50%;box-shadow:0 2px 8px #0002;\">' +\n                           '<\/div>' +\n                           '<b>Nama:<\/b> '+row.nama+'<br>'+\n                           '<b>Jabatan:<\/b> '+row.jabatan+'<br>'+\n                           '<b>Jenis Kelamin:<\/b> '+row.jenis_kelamin+'<br>'+\n                           '<b>Pendidikan:<\/b> '+row.pendidikan_terakhir.tingkat+'<br>'+\n                           '<b>Jurusan:<\/b> '+(row.pendidikan_terakhir.jurusan||'-')+'<br>'+\n                           '<b>Nama Sekolah:<\/b> '+(row.pendidikan_terakhir.nama_sekolah||'-')+'<br>'+\n                           '<b>Tahun Lulus:<\/b> '+(row.pendidikan_terakhir.tahun_lulus||'-')+'<br>'+\n                           '<b>Usia:<\/b> '+row.usia+'<br>'+\n                           '<b>Tanggal Habis Jabatan:<\/b> '+row.tanggal_habis_jabatan+'<br>'+\n                           '<b>Riwayat Jabatan:<\/b><ul>';\n                if(row.riwayat_jabatan && row.riwayat_jabatan.length){\n                    row.riwayat_jabatan.forEach(function(rj){\n                        html += '<li>SK: '+rj.nomor_sk+', Tgl: '+(rj.tanggal_sk||'-')+', Pejabat: '+rj.pejabat_yang_mengangkat+'<\/li>';\n                    });\n                } else {\n                    html += '<li>-<\/li>';\n                }\n                html += '<\/ul>';\n                $('#modalContent').html(html);\n                $('#detailModal').fadeIn(150);\n            });\n        });\n        $('#closeModal').on('click', function(){\n            $('#detailModal').fadeOut(150);\n        });\n        $('#detailModal').on('click', function(e){\n            if(e.target === this) $(this).fadeOut(150);\n        });\n    });\n    <\/script>\n    <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":88,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1830","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/balecatursid.slemankab.go.id\/home\/wp-json\/wp\/v2\/pages\/1830","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/balecatursid.slemankab.go.id\/home\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/balecatursid.slemankab.go.id\/home\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/balecatursid.slemankab.go.id\/home\/wp-json\/wp\/v2\/users\/88"}],"replies":[{"embeddable":true,"href":"https:\/\/balecatursid.slemankab.go.id\/home\/wp-json\/wp\/v2\/comments?post=1830"}],"version-history":[{"count":2,"href":"https:\/\/balecatursid.slemankab.go.id\/home\/wp-json\/wp\/v2\/pages\/1830\/revisions"}],"predecessor-version":[{"id":2124,"href":"https:\/\/balecatursid.slemankab.go.id\/home\/wp-json\/wp\/v2\/pages\/1830\/revisions\/2124"}],"wp:attachment":[{"href":"https:\/\/balecatursid.slemankab.go.id\/home\/wp-json\/wp\/v2\/media?parent=1830"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}