{"id":12,"date":"2026-08-29T05:17:59","date_gmt":"2026-08-29T05:17:59","guid":{"rendered":"https:\/\/jangkaweb.com\/ikapijatim\/?st-import=6a8812f7447c374b23a4b75982465434"},"modified":"2026-08-29T09:45:33","modified_gmt":"2026-08-29T09:45:33","slug":"anggota","status":"publish","type":"page","link":"https:\/\/jangkaweb.com\/ikapijatim\/anggota\/","title":{"rendered":"Anggota"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"12\" class=\"elementor elementor-12\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b4acfde e-flex e-con-boxed e-con e-parent\" data-id=\"b4acfde\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-add49e3 elementor-widget elementor-widget-heading\" data-id=\"add49e3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Anggota IKAPI JATIM<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8190d45 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"8190d45\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e628e17 e-flex e-con-boxed e-con e-parent\" data-id=\"e628e17\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ec717c3 elementor-widget elementor-widget-html\" data-id=\"ec717c3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    \/* ====================================================================\r\n       STYLING MURNI (PURE CSS) AGAR 100% AMAN DI ELEMENTOR\r\n       Warna disesuaikan dengan Logo Biru IKAPI Jatim\r\n    ==================================================================== *\/\r\n    .ikapi-container {\r\n        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n        background-color: #ffffff !important; \/* Memaksa background putih bersih *\/\r\n        padding: 35px 25px;\r\n        border-radius: 12px;\r\n        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\r\n        width: 100%;\r\n        color: #333333;\r\n        box-sizing: border-box;\r\n    }\r\n\r\n    \/* ====================================================================\r\n       STYLING TABEL DATATABLES\r\n    ==================================================================== *\/\r\n    #tabelAnggotaElementor {\r\n        width: 100% !important;\r\n        border-collapse: collapse;\r\n        border: 1px solid #e2e8f0;\r\n        border-radius: 8px;\r\n        overflow: hidden;\r\n    }\r\n\r\n    \/* HEADER TABEL *\/\r\n    #tabelAnggotaElementor thead th {\r\n        background-color: #007bff !important; \/* Biru IKAPI *\/\r\n        color: #ffffff !important;\r\n        font-weight: 700;\r\n        padding: 16px 14px;\r\n        font-size: 14px;\r\n        text-transform: uppercase;\r\n        border-bottom: 3px solid #0056b3;\r\n        text-align: left;\r\n    }\r\n\r\n    \/* BARIS DATA *\/\r\n    #tabelAnggotaElementor tbody td {\r\n        padding: 16px 14px;\r\n        font-size: 15px;\r\n        color: #334155;\r\n        border-bottom: 1px solid #e2e8f0;\r\n        vertical-align: middle;\r\n        background-color: #ffffff;\r\n    }\r\n    \r\n    #tabelAnggotaElementor tbody tr.even td {\r\n        background-color: #f8fafc;\r\n    }\r\n\r\n    #tabelAnggotaElementor tbody tr:hover td {\r\n        background-color: #f1f5f9 !important;\r\n        cursor: pointer;\r\n    }\r\n\r\n    \/* ====================================================================\r\n       MODIFIKASI ACCORDION \/ RESPONSIVE PLUS MINUS BUTTON\r\n    ==================================================================== *\/\r\n    table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control {\r\n        position: relative;\r\n        padding-left: 55px !important; \r\n        font-weight: 700;\r\n        color: #0f172a;\r\n    }\r\n\r\n    \/* Tombol Plus (+) *\/\r\n    table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {\r\n        content: '+';\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 15px;\r\n        transform: translateY(-50%);\r\n        background-color: #e2e8f0;\r\n        color: #007bff;\r\n        width: 26px;\r\n        height: 26px;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        border-radius: 50%;\r\n        font-weight: bold;\r\n        font-size: 18px;\r\n        box-shadow: 0 2px 4px rgba(0,0,0,0.1);\r\n        transition: all 0.2s ease;\r\n    }\r\n\r\n    \/* Tombol Minus (-) saat dibuka *\/\r\n    table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before {\r\n        content: '-';\r\n        background-color: #007bff;\r\n        color: #ffffff;\r\n    }\r\n\r\n    table.dataTable > tbody > tr.parent td {\r\n        background-color: #f8fafc !important;\r\n    }\r\n    \r\n    \/* Garis Kiri Penanda Baris Terbuka *\/\r\n    table.dataTable > tbody > tr.parent > td:first-child {\r\n        box-shadow: inset 4px 0 0 0 #007bff;\r\n    }\r\n\r\n    \/* ====================================================================\r\n       STYLING ISI ACCORDION (DETAIL ANGGOTA)\r\n    ==================================================================== *\/\r\n    .dtr-details {\r\n        width: 100%;\r\n        padding: 10px 20px;\r\n        margin: 0;\r\n        list-style: none;\r\n    }\r\n    .dtr-details li {\r\n        padding: 12px 0;\r\n        border-bottom: 1px dashed #cbd5e1;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    .dtr-details li:last-child {\r\n        border-bottom: none;\r\n    }\r\n    .dtr-title {\r\n        font-weight: 700;\r\n        color: #007bff;\r\n        font-size: 13px;\r\n        text-transform: uppercase;\r\n        margin-bottom: 4px;\r\n    }\r\n    .dtr-data {\r\n        color: #334155;\r\n        font-size: 15px;\r\n        line-height: 1.5;\r\n        white-space: normal;\r\n    }\r\n\r\n    \/* ====================================================================\r\n       STYLING LABEL STATUS\r\n    ==================================================================== *\/\r\n    .badge-aktif {\r\n        background-color: #d1fae5;\r\n        color: #059669;\r\n        border: 1px solid #a7f3d0;\r\n        padding: 6px 12px;\r\n        border-radius: 6px;\r\n        font-size: 13px;\r\n        font-weight: 700;\r\n        display: inline-block;\r\n    }\r\n    .badge-nonaktif {\r\n        background-color: #fee2e2;\r\n        color: #dc2626;\r\n        border: 1px solid #fecaca;\r\n        padding: 6px 12px;\r\n        border-radius: 6px;\r\n        font-size: 13px;\r\n        font-weight: 700;\r\n        display: inline-block;\r\n    }\r\n\r\n    \/* ====================================================================\r\n       PENCARIAN & PAGINATION\r\n    ==================================================================== *\/\r\n    .dataTables_wrapper .dataTables_filter { margin-bottom: 20px; color: #333; }\r\n    .dataTables_wrapper .dataTables_filter input { \r\n        border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; margin-left: 10px; outline: none; background: #fff; color:#333;\r\n    }\r\n    .dataTables_wrapper .dataTables_filter input:focus { border-color: #007bff; box-shadow: 0 0 0 2px rgba(0,123,255,0.2); }\r\n    \r\n    .dataTables_wrapper .dataTables_length { margin-bottom: 20px; color: #333; }\r\n    .dataTables_wrapper .dataTables_length select { \r\n        border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px; margin: 0 5px; background: #fff; color:#333;\r\n    }\r\n    \r\n    .dataTables_wrapper .dataTables_paginate { margin-top: 20px; }\r\n    .dataTables_wrapper .dataTables_paginate .paginate_button {\r\n        border-radius: 6px !important; margin: 0 3px; padding: 6px 12px; border: 1px solid transparent; background: #f8fafc; color: #333 !important;\r\n    }\r\n    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {\r\n        background: #e2e8f0 !important; color: #000 !important; border: 1px solid #cbd5e1;\r\n    }\r\n    .dataTables_wrapper .dataTables_paginate .paginate_button.current, \r\n    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {\r\n        background: #007bff !important; color: white !important; border: 1px solid #0056b3; font-weight: bold;\r\n    }\r\n    .dataTables_wrapper .dataTables_info { margin-top: 20px; font-size: 14px; color: #64748b; }\r\n<\/style>\r\n\r\n<div class=\"ikapi-container\">\r\n    <table id=\"tabelAnggotaElementor\" class=\"display responsive nowrap\" style=\"width:100%\">\r\n        <thead>\r\n            <tr>\r\n                <!-- Kolom yang Tampil di Awal (Visible) -->\r\n                <th>Nama Penerbit<\/th>\r\n                <th>Nomor Anggota<\/th>\r\n                <th>Masa KTA Berakhir<\/th>\r\n                <th>Status<\/th>\r\n                \r\n                <!-- Kolom yang Disembunyikan ke dalam Accordion (class \"none\") -->\r\n                <th class=\"none\">No. Urut Excel<\/th>\r\n                <th class=\"none\">Kota \/ Kab.<\/th>\r\n                <th class=\"none\">Alamat Lengkap<\/th>\r\n                <th class=\"none\">No. Telepon<\/th>\r\n                <th class=\"none\">Fax<\/th>\r\n                <th class=\"none\">Email Resmi<\/th>\r\n                <th class=\"none\">Nama Pimpinan<\/th>\r\n                <th class=\"none\">Jenis Terbitan<\/th>\r\n            <\/tr>\r\n        <\/thead>\r\n        <tbody id=\"bodyTabelAnggota\">\r\n            <tr>\r\n                <td colspan=\"4\" style=\"text-align: center; padding: 40px; color: #64748b; font-size: 16px;\">\r\n                    Mengambil data dari pangkalan data IKAPI...\r\n                <\/td>\r\n            <\/tr>\r\n        <\/tbody>\r\n    <\/table>\r\n<\/div>\r\n\r\n<!-- Library Kebutuhan -->\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.datatables.net\/1.13.6\/css\/jquery.dataTables.min.css\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.datatables.net\/responsive\/2.5.0\/css\/responsive.dataTables.min.css\">\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.7.0.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.datatables.net\/1.13.6\/js\/jquery.dataTables.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.datatables.net\/responsive\/2.5.0\/js\/dataTables.responsive.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/PapaParse\/5.4.1\/papaparse.min.js\"><\/script>\r\n\r\n<script>\r\n    \/\/ =========================================================================\r\n    \/\/ LINK DATA CSV (GOOGLE SHEETS)\r\n    \/\/ Ganti URL di bawah ini jika menggunakan file spreadsheet yang baru.\r\n    \/\/ =========================================================================\r\n    const csvFileUrl = \"https:\/\/docs.google.com\/spreadsheets\/d\/1G6o4Hosj0_PNC1PiVt2V38_spgHjHEblS3YAjh06nJo\/export?format=csv\";\r\n\r\n    jQuery(document).ready(function($) {\r\n        if (csvFileUrl !== \"\") {\r\n            Papa.parse(csvFileUrl, {\r\n                download: true,\r\n                header: false,\r\n                skipEmptyLines: true,\r\n                complete: function(results) {\r\n                    var data = results.data;\r\n                    \r\n                    \/\/ Hapus baris pertama (Header Judul Excel) jika mendeteksi bukan angka di kolom pertama\r\n                    if(data.length > 0 && isNaN(parseInt(data[0][0]))) {\r\n                        data.shift();\r\n                    }\r\n\r\n                    var formattedData = [];\r\n                    \r\n                    data.forEach(function(row) {\r\n                        \/\/ Memastikan baris data valid (punya kolom yang cukup)\r\n                        if(row.length >= 4) {\r\n                            var no = row[0] ? row[0].trim() : '-';\r\n                            var noAnggota = row[1] ? row[1].trim() : '-';\r\n                            var kota = row[2] ? row[2].trim() : '-';\r\n                            var masaKTA = row[3] ? row[3].trim() : '-';\r\n                            var namaPenerbit = row[4] ? row[4].trim() : '-';\r\n                            var alamat = row[5] ? row[5].trim() : '-';\r\n                            var telepon = row[6] ? row[6].trim() : '-';\r\n                            var fax = row[7] ? row[7].trim() : '-';\r\n                            var email = row[8] ? row[8].trim() : '-';\r\n                            var pimpinan = row[9] ? row[9].trim() : '-';\r\n                            var jenis = row[10] ? row[10].trim() : '-';\r\n                            \r\n                            \/\/ Menentukan Status Aktif \/ Tidak Aktif Berdasarkan Tahun\r\n                            var statusLabel = '<span class=\"badge-aktif\">Aktif<\/span>';\r\n                            var yearMatch = masaKTA.match(\/\\d{2,4}$\/);\r\n                            if(yearMatch) {\r\n                                var year = parseInt(yearMatch[0]);\r\n                                if(year < 100) year += 2000; \r\n                                if(year < 2026) {\r\n                                    statusLabel = '<span class=\"badge-nonaktif\">Tidak Aktif<\/span>';\r\n                                }\r\n                            } else if (masaKTA === '-' || masaKTA === '') {\r\n                                 statusLabel = '<span style=\"color:#94a3b8; font-weight:bold;\">Tidak Diketahui<\/span>';\r\n                            }\r\n\r\n                            \/\/ MENGISI 12 KOLOM MUTLAK KE DALAM ARRAY\r\n                            formattedData.push([\r\n                                '<span style=\"font-size: 16px; font-weight: bold; color: #0f172a;\">' + namaPenerbit + '<\/span>', \/\/ [0] Tampil Utama\r\n                                '<span style=\"font-weight: bold; color: #007bff;\">' + noAnggota + '<\/span>', \/\/ [1] Tampil Utama\r\n                                '<span>' + masaKTA + '<\/span>', \/\/ [2] Tampil Utama\r\n                                statusLabel, \/\/ [3] Tampil Utama\r\n                                no, \/\/ [4] Hidden \r\n                                '<strong>' + kota + '<\/strong>', \/\/ [5] Hidden\r\n                                alamat, \/\/ [6] Hidden\r\n                                telepon, \/\/ [7] Hidden\r\n                                fax, \/\/ [8] Hidden\r\n                                email !== '-' ? '<a href=\"mailto:' + email + '\" style=\"color:#007bff; text-decoration:underline;\">' + email + '<\/a>' : '-', \/\/ [9] Hidden\r\n                                pimpinan, \/\/ [10] Hidden\r\n                                jenis \/\/ [11] Hidden\r\n                            ]);\r\n                        }\r\n                    });\r\n\r\n                    \/\/ Kosongkan pesan loading\r\n                    $('#bodyTabelAnggota').empty();\r\n\r\n                    \/\/ Mengaktifkan DataTables\r\n                    $('#tabelAnggotaElementor').DataTable({\r\n                        data: formattedData,\r\n                        \"order\": [], \/\/ Membiarkan urutan awal\r\n                        \"responsive\": {\r\n                            details: {\r\n                                type: 'column',\r\n                                target: 'tr' \/\/ Memungkinkan seluruh area baris diklik untuk expand\r\n                            }\r\n                        },\r\n                        \"columnDefs\": [ {\r\n                            className: 'dtr-control', \r\n                            orderable: false,\r\n                            targets: 0 \/\/ Panah plus ditempatkan pada kolom Nama Penerbit\r\n                        } ],\r\n                        \"pageLength\": 10,\r\n                        \"language\": {\r\n                            \"info\": \"Menampilkan _START_ sampai _END_ dari _TOTAL_ anggota\",\r\n                            \"infoEmpty\": \"Menampilkan 0 data\",\r\n                            \"infoFiltered\": \"(disaring dari _MAX_ data)\",\r\n                            \"lengthMenu\": \"Tampil _MENU_ baris\",\r\n                            \"search\": \"Pencarian :\",\r\n                            \"zeroRecords\": \"Tidak ada data anggota yang cocok\",\r\n                            \"paginate\": {\r\n                                \"first\": \"Awal\",\r\n                                \"previous\": \"Kembali\",\r\n                                \"next\": \"Lanjut\",\r\n                                \"last\": \"Akhir\"\r\n                            },\r\n                        }\r\n                    });\r\n                },\r\n                error: function(err) {\r\n                    console.error(\"Error loading CSV:\", err);\r\n                    $('#bodyTabelAnggota').html('<tr><td colspan=\"4\" style=\"text-align:center; color:red; padding:20px;\">Gagal memuat data dari Google Sheets. Pastikan Link Publik\/Akses Sharing sudah benar.<\/td><\/tr>');\r\n                }\r\n            });\r\n        }\r\n    });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Anggota IKAPI JATIM Nama Penerbit Nomor Anggota Masa KTA Berakhir Status No. Urut Excel Kota \/ Kab. Alamat Lengkap No. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"disabled","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jangkaweb.com\/ikapijatim\/wp-json\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jangkaweb.com\/ikapijatim\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jangkaweb.com\/ikapijatim\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jangkaweb.com\/ikapijatim\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jangkaweb.com\/ikapijatim\/wp-json\/wp\/v2\/comments?post=12"}],"version-history":[{"count":24,"href":"https:\/\/jangkaweb.com\/ikapijatim\/wp-json\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":1400,"href":"https:\/\/jangkaweb.com\/ikapijatim\/wp-json\/wp\/v2\/pages\/12\/revisions\/1400"}],"wp:attachment":[{"href":"https:\/\/jangkaweb.com\/ikapijatim\/wp-json\/wp\/v2\/media?parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}