{"id":707,"date":"2026-06-05T07:54:30","date_gmt":"2026-06-05T07:54:30","guid":{"rendered":"https:\/\/lph.uin-malang.ac.id\/?page_id=707"},"modified":"2026-06-22T04:34:50","modified_gmt":"2026-06-22T04:34:50","slug":"pelaku-usaha-kami","status":"publish","type":"page","link":"https:\/\/lph.uin-malang.ac.id\/?page_id=707","title":{"rendered":"Pelaku Usaha Kami"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"707\" class=\"elementor elementor-707\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2fbed2c e-flex e-con-boxed e-con e-parent\" data-id=\"2fbed2c\" 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-d496122 elementor-widget elementor-widget-html\" data-id=\"d496122\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"id\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<style>\r\n  * { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n  .pu-wrapper {\r\n    font-family: 'Segoe UI', sans-serif;\r\n    width: 100%;\r\n  }\r\n\r\n  .pu-toolbar {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-bottom: 14px;\r\n    flex-wrap: wrap;\r\n    gap: 10px;\r\n  }\r\n\r\n  .pu-search-box {\r\n    display: flex;\r\n    align-items: center;\r\n    border: 1px solid #ccc;\r\n    border-radius: 8px;\r\n    overflow: hidden;\r\n    background: #fff;\r\n  }\r\n\r\n  .pu-search-box input {\r\n    border: none;\r\n    outline: none;\r\n    padding: 8px 12px;\r\n    font-size: 14px;\r\n    width: 240px;\r\n  }\r\n\r\n  .pu-search-box button {\r\n    background: #2A9C97;\r\n    border: none;\r\n    padding: 8px 14px;\r\n    cursor: pointer;\r\n    color: white;\r\n    font-size: 14px;\r\n  }\r\n\r\n  .pu-info {\r\n    font-size: 13px;\r\n    color: #666;\r\n  }\r\n\r\n  .pu-table-wrap {\r\n    width: 100%;\r\n    overflow-x: auto;\r\n    border-radius: 12px;\r\n    border: 1px solid #2A9C97;\r\n    box-shadow: 0 2px 12px rgba(0,0,0,0.08);\r\n  }\r\n\r\n  table {\r\n    width: 100%;\r\n    border-collapse: collapse;\r\n    min-width: 700px;\r\n  }\r\n\r\n  thead th {\r\n    background-color: #2A9C97;\r\n    color: #fff;\r\n    font-weight: 600;\r\n    padding: 13px 14px;\r\n    text-align: left;\r\n    font-size: 13px;\r\n    text-transform: uppercase;\r\n    letter-spacing: 0.4px;\r\n    border: 1px solid #2A9C97;\r\n    white-space: nowrap;\r\n    cursor: pointer;\r\n    user-select: none;\r\n  }\r\n\r\n  thead th:hover { background-color: #238a85; }\r\n\r\n  thead th .sort-icon { margin-left: 6px; opacity: 0.6; font-size: 11px; }\r\n  thead th.asc .sort-icon::after { content: ' \u25b2'; }\r\n  thead th.desc .sort-icon::after { content: ' \u25bc'; }\r\n  thead th:not(.asc):not(.desc) .sort-icon::after { content: ' \u21c5'; }\r\n\r\n  tbody td {\r\n    padding: 11px 14px;\r\n    font-size: 13px;\r\n    color: #333;\r\n    border: 1px solid #cfcfcf;\r\n    vertical-align: middle;\r\n  }\r\n\r\n  tbody tr:nth-child(even) { background-color: #f0f8f7; }\r\n  tbody tr:hover { background-color: #d9efed; transition: background 0.15s; }\r\n\r\n  .pu-pagination {\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-top: 14px;\r\n    flex-wrap: wrap;\r\n    gap: 8px;\r\n  }\r\n\r\n  .pu-page-info { font-size: 13px; color: #555; }\r\n\r\n  .pu-page-btns {\r\n    display: flex;\r\n    gap: 4px;\r\n    align-items: center;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .pu-page-btns button {\r\n    min-width: 34px;\r\n    height: 34px;\r\n    padding: 0 8px;\r\n    border: 1px solid #ccc;\r\n    background: #fff;\r\n    border-radius: 6px;\r\n    cursor: pointer;\r\n    font-size: 13px;\r\n    color: #333;\r\n    transition: all 0.15s;\r\n  }\r\n\r\n  .pu-page-btns button:hover { background: #f0f8f7; border-color: #2A9C97; }\r\n  .pu-page-btns button.active { background: #2A9C97; color: #fff; border-color: #2A9C97; font-weight: 600; }\r\n  .pu-page-btns button:disabled { opacity: 0.35; cursor: not-allowed; }\r\n\r\n  .pu-per-page {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 6px;\r\n    font-size: 13px;\r\n    color: #555;\r\n  }\r\n\r\n  .pu-per-page select {\r\n    border: 1px solid #ccc;\r\n    border-radius: 6px;\r\n    padding: 4px 8px;\r\n    font-size: 13px;\r\n    outline: none;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .pu-loading {\r\n    text-align: center;\r\n    padding: 40px;\r\n    color: #2A9C97;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .pu-error {\r\n    text-align: center;\r\n    padding: 30px;\r\n    color: #c0392b;\r\n    font-size: 14px;\r\n    background: #fdf0ef;\r\n    border-radius: 8px;\r\n    border: 1px solid #f5c6c3;\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .pu-toolbar { flex-direction: column; align-items: flex-start; }\r\n    .pu-search-box input { width: 180px; }\r\n    .pu-pagination { flex-direction: column; align-items: flex-start; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"pu-wrapper\">\r\n  <div class=\"pu-toolbar\">\r\n    <div class=\"pu-per-page\">\r\n      Tampilkan\r\n      <select id=\"perPageSelect\" onchange=\"changePerPage()\">\r\n        <option value=\"10\">10<\/option>\r\n        <option value=\"25\">25<\/option>\r\n        <option value=\"50\">50<\/option>\r\n        <option value=\"100\">100<\/option>\r\n      <\/select>\r\n      data\r\n    <\/div>\r\n    <div class=\"pu-search-box\">\r\n      <input type=\"text\" id=\"searchInput\" placeholder=\"Cari...\" oninput=\"onSearch()\">\r\n      <button>\ud83d\udd0d<\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"pu-table-wrap\">\r\n    <div id=\"tableContainer\" class=\"pu-loading\">Memuat data...<\/div>\r\n  <\/div>\r\n\r\n  <div class=\"pu-pagination\">\r\n    <div class=\"pu-page-info\" id=\"pageInfo\"><\/div>\r\n    <div class=\"pu-page-btns\" id=\"pageBtns\"><\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ ============================================================\r\n\/\/ GANTI INI DENGAN SHEET ID KAMU\r\n\/\/ Ambil dari URL: https:\/\/docs.google.com\/spreadsheets\/d\/SHEET_ID\/edit\r\n\/\/ ============================================================\r\nconst SHEET_ID = \"1E4rkS5m0mD3wGDkzktZD3Fu6WAmzV4oSgjXiDLAdxns\";\r\n\r\n\/\/ Nama sheet (tab di bawah). Default biasanya \"Sheet1\"\r\nconst SHEET_NAME = \"DATA_PU_TERBIT_SH_per_jUNI_2026\";\r\n\/\/ ============================================================\r\n\r\nlet allData = [];\r\nlet filteredData = [];\r\nlet currentPage = 1;\r\nlet perPage = 10;\r\nlet sortCol = -1;\r\nlet sortDir = 'asc';\r\n\r\nconst COLS = ['No.', 'NO. STTD', 'NAMA PELAKU USAHA', 'ALAMAT', 'NOMOR SKH', 'TGL SIDANG', 'JUMLAH PRODUK TERBIT SH'];\r\n\r\nasync function fetchData() {\r\n  const url = `https:\/\/docs.google.com\/spreadsheets\/d\/${SHEET_ID}\/gviz\/tq?tqx=out:json&sheet=${encodeURIComponent(SHEET_NAME)}`;\r\n  try {\r\n    const res = await fetch(url);\r\n    const text = await res.text();\r\n    \/\/ Google returns JSON wrapped in google.visualization.Query.setResponse(...)\r\n    const json = JSON.parse(text.substring(47, text.length - 2));\r\n    const rows = json.table.rows;\r\n    allData = rows.map(row => row.c.map(cell => cell ? (cell.f || cell.v || '') : ''));\r\n    \/\/ Skip header row jika ada (baris pertama sama dengan COLS)\r\n    if (allData.length > 0 && String(allData[0][0]).toLowerCase().includes('no')) {\r\n      allData = allData.slice(1);\r\n    }\r\n    filteredData = [...allData];\r\n    renderTable();\r\n  } catch(e) {\r\n    document.getElementById('tableContainer').innerHTML = `\r\n      <div class=\"pu-error\">\r\n        \u274c Gagal memuat data. Pastikan:<br><br>\r\n        1. SHEET_ID sudah diganti dengan benar<br>\r\n        2. Google Sheets sudah di-set <b>\"Anyone with the link can view\"<\/b><br>\r\n        3. Nama sheet (tab) sudah sesuai<br><br>\r\n        <small>Error: ${e.message}<\/small>\r\n      <\/div>`;\r\n  }\r\n}\r\n\r\nfunction renderTable() {\r\n  const start = (currentPage - 1) * perPage;\r\n  const end = start + perPage;\r\n  const pageData = filteredData.slice(start, end);\r\n\r\n  let html = '<table><thead><tr>';\r\n  COLS.forEach((col, i) => {\r\n    const cls = sortCol === i ? sortDir : '';\r\n    html += `<th class=\"${cls}\" onclick=\"sortBy(${i})\">${col}<span class=\"sort-icon\"><\/span><\/th>`;\r\n  });\r\n  html += '<\/tr><\/thead><tbody>';\r\n\r\n  if (pageData.length === 0) {\r\n    html += `<tr><td colspan=\"${COLS.length}\" style=\"text-align:center;color:#888;padding:30px;\">Tidak ada data ditemukan.<\/td><\/tr>`;\r\n  } else {\r\n    pageData.forEach(row => {\r\n      html += '<tr>' + row.map(cell => `<td>${cell}<\/td>`).join('') + '<\/tr>';\r\n    });\r\n  }\r\n\r\n  html += '<\/tbody><\/table>';\r\n  document.getElementById('tableContainer').innerHTML = html;\r\n\r\n  \/\/ Pagination info\r\n  const total = filteredData.length;\r\n  const from = total === 0 ? 0 : start + 1;\r\n  const to = Math.min(end, total);\r\n  document.getElementById('pageInfo').textContent = `Menampilkan ${from}\u2013${to} dari ${total} data`;\r\n\r\n  renderPagination();\r\n}\r\n\r\nfunction renderPagination() {\r\n  const totalPages = Math.ceil(filteredData.length \/ perPage);\r\n  const btns = document.getElementById('pageBtns');\r\n  let html = '';\r\n\r\n  html += `<button onclick=\"goPage(1)\" ${currentPage===1?'disabled':''}>\u00ab<\/button>`;\r\n  html += `<button onclick=\"goPage(${currentPage-1})\" ${currentPage===1?'disabled':''}>\u2039<\/button>`;\r\n\r\n  \/\/ Tampilkan maksimal 5 nomor halaman di sekitar currentPage\r\n  let start = Math.max(1, currentPage - 2);\r\n  let end = Math.min(totalPages, start + 4);\r\n  if (end - start < 4) start = Math.max(1, end - 4);\r\n\r\n  if (start > 1) html += `<button onclick=\"goPage(1)\">1<\/button>${start > 2 ? '<button disabled>\u2026<\/button>' : ''}`;\r\n  for (let i = start; i <= end; i++) {\r\n    html += `<button class=\"${i===currentPage?'active':''}\" onclick=\"goPage(${i})\">${i}<\/button>`;\r\n  }\r\n  if (end < totalPages) {\r\n    html += `${end < totalPages - 1 ? '<button disabled>\u2026<\/button>' : ''}<button onclick=\"goPage(${totalPages})\">${totalPages}<\/button>`;\r\n  }\r\n\r\n  html += `<button onclick=\"goPage(${currentPage+1})\" ${currentPage===totalPages||totalPages===0?'disabled':''}>\u203a<\/button>`;\r\n  html += `<button onclick=\"goPage(${totalPages})\" ${currentPage===totalPages||totalPages===0?'disabled':''}>\u00bb<\/button>`;\r\n\r\n  btns.innerHTML = html;\r\n}\r\n\r\nfunction goPage(p) {\r\n  const totalPages = Math.ceil(filteredData.length \/ perPage);\r\n  if (p < 1 || p > totalPages) return;\r\n  currentPage = p;\r\n  renderTable();\r\n}\r\n\r\nfunction onSearch() {\r\n  const q = document.getElementById('searchInput').value.toLowerCase();\r\n  filteredData = allData.filter(row => row.some(cell => String(cell).toLowerCase().includes(q)));\r\n  currentPage = 1;\r\n  renderTable();\r\n}\r\n\r\nfunction changePerPage() {\r\n  perPage = parseInt(document.getElementById('perPageSelect').value);\r\n  currentPage = 1;\r\n  renderTable();\r\n}\r\n\r\nfunction sortBy(colIdx) {\r\n  if (sortCol === colIdx) {\r\n    sortDir = sortDir === 'asc' ? 'desc' : 'asc';\r\n  } else {\r\n    sortCol = colIdx;\r\n    sortDir = 'asc';\r\n  }\r\n  filteredData.sort((a, b) => {\r\n    const va = String(a[colIdx] || '');\r\n    const vb = String(b[colIdx] || '');\r\n    const na = parseFloat(va.replace(\/[^0-9.-]\/g, ''));\r\n    const nb = parseFloat(vb.replace(\/[^0-9.-]\/g, ''));\r\n    if (!isNaN(na) && !isNaN(nb)) return sortDir === 'asc' ? na - nb : nb - na;\r\n    return sortDir === 'asc' ? va.localeCompare(vb, 'id') : vb.localeCompare(va, 'id');\r\n  });\r\n  currentPage = 1;\r\n  renderTable();\r\n}\r\n\r\nfetchData();\r\n<\/script>\r\n<\/body>\r\n<\/html>\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>Tampilkan 102550100 data \ud83d\udd0d Memuat data&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-707","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lph.uin-malang.ac.id\/index.php?rest_route=\/wp\/v2\/pages\/707","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lph.uin-malang.ac.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lph.uin-malang.ac.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lph.uin-malang.ac.id\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lph.uin-malang.ac.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=707"}],"version-history":[{"count":8,"href":"https:\/\/lph.uin-malang.ac.id\/index.php?rest_route=\/wp\/v2\/pages\/707\/revisions"}],"predecessor-version":[{"id":2614,"href":"https:\/\/lph.uin-malang.ac.id\/index.php?rest_route=\/wp\/v2\/pages\/707\/revisions\/2614"}],"wp:attachment":[{"href":"https:\/\/lph.uin-malang.ac.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=707"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}