{"id":19429,"date":"2024-09-19T14:51:10","date_gmt":"2024-09-19T14:51:10","guid":{"rendered":"http:\/\/10.21.87.80\/?page_id=19429"},"modified":"2025-02-10T01:18:41","modified_gmt":"2025-02-10T01:18:41","slug":"iklan-jppm","status":"publish","type":"page","link":"https:\/\/jpp.mohr.gov.my\/en\/iklan-jppm\/","title":{"rendered":"Announcement"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><div      class=\"vc_row wpb_row section vc_row-fluid  grid_section\" style=' padding-top:50px; padding-bottom:78px; text-align:left;'><div class=\"section_inner clearfix\"><div class='section_inner_margin clearfix'><div class=\"element_from_fade\"><div><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><div      class=\"vc_row wpb_row section vc_row-fluid vc_inner\" style=' text-align:left;'><div class=\"full_section_inner clearfix\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\">\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h1 style=\"text-align: left;\">List of Announcements<\/h1>\n\n\t\t<\/div> \n\t<\/div> \n\t<div class=\"wpb_text_column wpb_content_element\">\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<h4 style=\"font-size: 13px; font-weight: regular; text-align: left; color: #656565;\">** Some content is not available in BILINGUAL<\/h4>\n\n\t\t<\/div> \n\t<\/div> \t<div class=\"vc_empty_space\"  style=\"height: 32px\" ><span\n\t\t\tclass=\"vc_empty_space_inner\">\n\t\t\t<span class=\"empty_space_image\"  ><\/span>\n\t\t<\/span><\/div>\n\n<\/div><\/div><\/div><\/div><\/div><div      class=\"vc_row wpb_row section vc_row-fluid vc_inner\" style=' text-align:left;'><div class=\"full_section_inner clearfix\"><div class=\"wpb_column vc_column_container vc_col-sm-2\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-sm-8\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_raw_html wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<input type=\"text\" id=\"myInput\" class=\"search-input\" onkeyup=\"searchTable()\" placeholder=\"Search\">\n<style>\n.search-input {\n  width: 20%;\n  font-size: 12px;\n  text-align: left;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  float: right; \/* Float the input to the right *\/\n}\n<\/style>\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-sm-2\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><\/div><\/div><\/div><\/div><\/div><div      class=\"vc_row wpb_row section vc_row-fluid vc_inner\" style=' text-align:left;'><div class=\"full_section_inner clearfix\"><div class=\"wpb_column vc_column_container vc_col-sm-2\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-sm-8\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_raw_code wpb_raw_html wpb_content_element\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.2\/css\/all.min.css\" rel=\"stylesheet\">\n\n<style>\n.tr:nth-child(even) {\n  background-color: #F1FBFE;\n}\n<\/style>\n\n<table id=\"dataTable\" style=\"border: none\" width=\"100%\">\n    <thead>\n        <tr class=\"tr\" style=\"background-color: #0A8572;padding: 5px\">\n            <th style=\"color: #fff; width: 5%;  \">#<\/th>\n            <th style=\"color: #fff; width: 20%; text-align: center\">Start<\/th>\n            <th style=\"color: #fff; text-align: left;\">Announcement Title<\/th>\n            <th style=\"color: #fff; width: 20%; text-align: center\">End<\/th>\n            <th style=\"color: #fff; width: 10%;\">View<\/th>\n        <\/tr>\n    <\/thead>\n    <tbody id=\"tableBody\"><\/tbody>\n<\/table>\n\n<div id=\"pagination\" style=\"text-align: center; vertical-align: middle; margin-top: 10px;\"><\/div>\n\t\t<\/div>\n\t<\/div>\n\n\t<div class=\"wpb_raw_code wpb_raw_js\" >\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<script>\n    const data = [\n\n\n\n{ id: 1, mula: '2025-02-10', title: 'Tiada Iklan', tamat: '2025-03-13', view: ''},\n\n\n        \/\/ Add more sample data here to test pagination\n    ];\n    \n    const rowsPerPage = 10; \/\/ Set rows per page\n    let currentPage = 1;\n    \n    function formatDate(dateString) {\n        const options = { day: 'numeric', month: 'long', year: 'numeric' };\n        return new Date(dateString).toLocaleDateString('ms-MY', options);\n    }\n    \n    \/\/ Function to display data\n    function displayData(page) {\n        const tableBody = document.getElementById('tableBody');\n        tableBody.innerHTML = ''; \/\/ Clear existing data\n    \n        const currentDate = new Date(); \/\/ Get current date\n    \n        const start = (page - 1) * rowsPerPage;\n        const end = start + rowsPerPage;\n    \n        \/\/ Filter data based on date conditions\n        const filteredData = data.filter(item => {\n            const mulaDate = new Date(item.mula);\n            const tamatDate = new Date(item.tamat);\n            return currentDate >= mulaDate && currentDate <= tamatDate; \/\/ Only include items within the date range\n        });\n    \n        const paginatedData = filteredData.slice(start, end);\n    \n        paginatedData.forEach((item, index) => {\n            const row = `<tr style=\"border: none\">\n                            <td style=\"text-align: center; vertical-align: middle\">${start + index + 1}<\/td>\n                            <td style=\"text-align: center; vertical-align: middle\">${formatDate(item.mula)}<\/td>\n                            <td style=\"text-align: left;\">${item.title}<\/td>\n                            <td style=\"text-align: center; vertical-align: middle\">${formatDate(item.tamat)}<\/td>\n                            <td style=\"text-align: center; vertical-align: middle\">\n                                <a target=\"__blank\" href=\"${item.view}\" style=\"background: transparent; padding-right: 5px; border: none; cursor: pointer\">\n                                    <i class=\"fas fa-eye\" style=\"color: #2FC8B1\"><\/i>\n                                <\/a>\n                            <\/td>\n                        <\/tr>`;\n            tableBody.insertAdjacentHTML('beforeend', row);\n        });\n    \n        generatePagination(filteredData.length); \/\/ Update pagination based on filtered data length\n    }\n    \n    \/\/ Function to generate pagination buttons\n    function generatePagination(filteredDataLength) {\n        const totalPages = Math.ceil(filteredDataLength \/ rowsPerPage);\n        const pagination = document.getElementById('pagination');\n        pagination.innerHTML = '';\n    \n        for (let i = 1; i <= totalPages; i++) {\n            const button = document.createElement('button');\n            button.innerText = i;\n            button.style.backgroundColor = i === currentPage ? '#0A8572' : '#eaeaea';\n            button.style.border = 'none';\n            button.style.borderRadius = '5px';\n            button.style.cursor = 'pointer';\n            button.style.color = i === currentPage ? '#fff' : '#000';\n            button.style.margin = '2px';\n    \n            button.addEventListener('click', function () {\n                currentPage = i;\n                displayData(currentPage);\n            });\n    \n            pagination.appendChild(button);\n        }\n    }\n    \n\n\n\/\/ Function to search the table\n    function searchTable() {\n        const input = document.getElementById('myInput');\n        const filter = input.value.toUpperCase();\n        const table = document.getElementById('dataTable');\n        const tr = table.getElementsByTagName('tr');\n    \n        for (let i = 1; i < tr.length; i++) {\n            tr[i].style.display = 'none';\n            const td = tr[i].getElementsByTagName('td');\n            for (let j = 0; j < td.length; j++) {\n                if (td[j]) {\n                    const txtValue = td[j].textContent || td[j].innerText;\n                    if (txtValue.toUpperCase().indexOf(filter) > -1) {\n                        tr[i].style.display = '';\n                        break;\n                    }\n                }\n            }\n        }\n    }\n    \n    \/\/ Initial display\n    displayData(currentPage);\n<\/script>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-sm-2\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div      class=\"vc_row wpb_row section vc_row-fluid\" style=' text-align:left;'><div class=\"full_section_inner clearfix\"><div class=\"wpb_column vc_column_container vc_col-sm-3\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\">\n\t<div class=\"wpb_text_column wpb_content_element\">\n\t\t<div class=\"wpb_wrapper\">\n\t\t\t<p id=\"custom_search_result\" style=\"display: none;\">Iklan Temuduga Terbuka MYSTEP BPPD,<br \/>\nPengambilan MYSTEP Jabatan Perhubungan Perusahaan Malaysia (JPPM) di Bahagian Pemulihan Kerja dan Pengurusan Rundingan Damai (BPK&amp;PRD)<\/p>\n\n\t\t<\/div> \n\t<\/div> <\/div><\/div><\/div><div class=\"wpb_column vc_column_container vc_col-sm-9\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><\/div><\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"Senarai Iklan ** Sesetengah kandungan bukan di dalam DWIBAHASA # Mula Tajuk Iklan Tamat Lihat Iklan Temuduga Terbuka MYSTEP BPPD, Pengambilan MYSTEP Jabatan Perhubungan Perusahaan Malaysia (JPPM) di Bahagian Pemulihan Kerja dan Pengurusan Rundingan Damai (BPK&amp;PRD)","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-19429","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jpp.mohr.gov.my\/en\/wp-json\/wp\/v2\/pages\/19429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jpp.mohr.gov.my\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jpp.mohr.gov.my\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jpp.mohr.gov.my\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jpp.mohr.gov.my\/en\/wp-json\/wp\/v2\/comments?post=19429"}],"version-history":[{"count":15,"href":"https:\/\/jpp.mohr.gov.my\/en\/wp-json\/wp\/v2\/pages\/19429\/revisions"}],"predecessor-version":[{"id":22139,"href":"https:\/\/jpp.mohr.gov.my\/en\/wp-json\/wp\/v2\/pages\/19429\/revisions\/22139"}],"wp:attachment":[{"href":"https:\/\/jpp.mohr.gov.my\/en\/wp-json\/wp\/v2\/media?parent=19429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}