{"id":20546,"date":"2024-10-04T10:19:55","date_gmt":"2024-10-04T10:19:55","guid":{"rendered":"http:\/\/10.21.87.80\/?page_id=20546"},"modified":"2025-02-10T01:19:27","modified_gmt":"2025-02-10T01:19:27","slug":"jppm-ads","status":"publish","type":"page","link":"https:\/\/jpp.mohr.gov.my\/en\/jppm-ads\/","title":{"rendered":"Advertisement"},"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 Advertisements<\/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 contents are NOT 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;\">Advertisement 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        { id: 1, mula: '2025-02-10', title: 'No Ads', 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('en-GB', 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    \/\/ 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;\">Open Interview Advertisement for MYSTEP BPPD,<br \/>\nRecruitment for MYSTEP at the Department of Industrial Relations Malaysia (JPPM) in the Work Recovery and Peace Negotiation Management Division (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":"List of Advertisements ** Some contents are NOT in Bilingual # Start Advertisement Title End View Open Interview Advertisement for MYSTEP BPPD, Recruitment for MYSTEP at the Department of Industrial Relations Malaysia (JPPM) in the Work Recovery and Peace Negotiation Management Division (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-20546","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jpp.mohr.gov.my\/en\/wp-json\/wp\/v2\/pages\/20546","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=20546"}],"version-history":[{"count":11,"href":"https:\/\/jpp.mohr.gov.my\/en\/wp-json\/wp\/v2\/pages\/20546\/revisions"}],"predecessor-version":[{"id":22140,"href":"https:\/\/jpp.mohr.gov.my\/en\/wp-json\/wp\/v2\/pages\/20546\/revisions\/22140"}],"wp:attachment":[{"href":"https:\/\/jpp.mohr.gov.my\/en\/wp-json\/wp\/v2\/media?parent=20546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}