{"id":77,"date":"2024-06-28T23:18:03","date_gmt":"2024-06-28T23:18:03","guid":{"rendered":"https:\/\/china-connect.net\/?page_id=77"},"modified":"2025-02-05T06:46:19","modified_gmt":"2025-02-05T06:46:19","slug":"our-programs","status":"publish","type":"page","link":"https:\/\/china-connect.net\/?page_id=77","title":{"rendered":"Our Programs"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"77\" class=\"elementor elementor-77\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-36d0d370 elementor-section-height-min-height elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"36d0d370\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-74e4d533\" data-id=\"74e4d533\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-771ae96 elementor-widget__width-initial elementor-widget elementor-widget-spacer\" data-id=\"771ae96\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.22.0 - 26-06-2024 *\/\n.elementor-column .elementor-spacer-inner{height:var(--spacer-size)}.e-con{--container-widget-width:100%}.e-con-inner>.elementor-widget-spacer,.e-con>.elementor-widget-spacer{width:var(--container-widget-width,var(--spacer-size));--align-self:var(--container-widget-align-self,initial);--flex-shrink:0}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container,.e-con>.elementor-widget-spacer>.elementor-widget-container{height:100%;width:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer{height:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner{height:var(--container-widget-height,var(--spacer-size))}.e-con-inner>.elementor-widget-spacer.elementor-widget-empty,.e-con>.elementor-widget-spacer.elementor-widget-empty{position:relative;min-height:22px;min-width:22px}.e-con-inner>.elementor-widget-spacer.elementor-widget-empty .elementor-widget-empty-icon,.e-con>.elementor-widget-spacer.elementor-widget-empty .elementor-widget-empty-icon{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;padding:0;width:22px;height:22px}<\/style>\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3c71dbac elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"3c71dbac\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-666ad9f5\" data-id=\"666ad9f5\" data-element_type=\"column\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4da01111 elementor-widget__width-initial elementor-widget elementor-widget-spacer\" data-id=\"4da01111\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-81d3d2b elementor-widget elementor-widget-html\" data-id=\"81d3d2b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\" \/>\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n    <title>University Programs<\/title>\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/xlsx\/0.18.5\/xlsx.full.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/PapaParse\/5.3.0\/papaparse.min.js\"><\/script>\r\n    <style>\r\n        .hide-column {\r\n            display: none;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-100\">\r\n    <div class=\"p-1 mx-auto\">\r\n        <h1 class=\"text-2xl font-bold mb-4\">University Programs<\/h1>\r\n        <div class=\"mb-4\">\r\n            <input\r\n                type=\"text\"\r\n                id=\"filterInput\"\r\n                class=\"shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline\"\r\n                placeholder=\"Filter programs...\"\r\n            \/>\r\n        <\/div>\r\n        <div class=\"overflow-x-auto\">\r\n            <table\r\n                id=\"programsTable\"\r\n                class=\"table-auto w-full shadow-lg rounded-lg overflow-hidden text-sm\"\r\n            >\r\n                <thead class=\"bg-gray-800 text-white\">\r\n                    <tr>\r\n                        <th class=\"px-2 py-1\">Program Name<\/th>\r\n                        <th class=\"px-2 py-1\">Duration<\/th>\r\n                        <th class=\"px-2 py-1\">Degree<\/th>\r\n                        <th class=\"px-2 py-1\">Teaching<\/th>\r\n                        <th class=\"px-2 py-1 hide-column\">Intake<\/th>\r\n                        <th class=\"px-2 py-1\">Scholarship Type<\/th>\r\n                        <th class=\"px-2 py-1\">Original Tuition (RMB\/year)<\/th>\r\n                        <th class=\"px-2 py-1\">Tuition After Scholarship (RMB\/year)<\/th>\r\n                        <th class=\"px-2 py-1\">Accommodation Fee (RMB\/year)<\/th>\r\n                        <th class=\"px-2 py-1\">Accommodation Fee After Scholarship (RMB\/year)<\/th>\r\n                        <th class=\"px-2 py-1\">Age Requirements<\/th>\r\n                    <\/tr>\r\n                <\/thead>\r\n                <tbody class=\"bg-white divide-y divide-gray-200\">\r\n                    <!-- Program data will be inserted here -->\r\n                <\/tbody>\r\n            <\/table>\r\n        <\/div>\r\n        <div class=\"mt-4 flex justify-between items-center\">\r\n            <button id=\"prevPage\" class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\">Previous<\/button>\r\n            <span id=\"pageInfo\"><\/span>\r\n            <button id=\"nextPage\" class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\">Next<\/button>\r\n        <\/div>\r\n    <\/div>\r\n    <script>\r\n        const dataUrl = \"https:\/\/china-connect.net\/wp-content\/uploads\/2024\/06\/2024-avaliable-program-list-1.csv\";\r\n        const tableBody = document.getElementById(\"programsTable\").getElementsByTagName(\"tbody\")[0];\r\n        const filterInput = document.getElementById(\"filterInput\");\r\n        const prevPageBtn = document.getElementById(\"prevPage\");\r\n        const nextPageBtn = document.getElementById(\"nextPage\");\r\n        const pageInfo = document.getElementById(\"pageInfo\");\r\n\r\n        let allPrograms = [];\r\n        let currentPage = 1;\r\n        const rowsPerPage = 300;\r\n\r\n        async function fetchAndPopulateTable() {\r\n            try {\r\n                const response = await fetch(dataUrl);\r\n                const data = await response.text();\r\n                \r\n                if (dataUrl.endsWith('.csv')) {\r\n                    Papa.parse(data, {\r\n                        complete: function(results) {\r\n                            allPrograms = results.data;\r\n                            allPrograms.shift(); \/\/ Remove header row\r\n                            filterPrograms();\r\n                        }\r\n                    });\r\n                } else if (dataUrl.endsWith('.xlsx')) {\r\n                    const workbook = XLSX.read(data, { type: \"binary\" });\r\n                    const sheetName = workbook.SheetNames[0];\r\n                    const worksheet = workbook.Sheets[sheetName];\r\n                    allPrograms = XLSX.utils.sheet_to_json(worksheet, {\r\n                        header: 1,\r\n                        defval: \"\",\r\n                    });\r\n                    allPrograms.shift(); \/\/ Remove header row\r\n                    filterPrograms();\r\n                } else {\r\n                    throw new Error(\"Unsupported file format\");\r\n                }\r\n            } catch (error) {\r\n                console.error(\"Error fetching or processing data:\", error);\r\n            }\r\n        }\r\n\r\n        function populateTable(data) {\r\n            tableBody.innerHTML = \"\";\r\n            data.forEach((program) => {\r\n                const row = tableBody.insertRow();\r\n                \/\/ Program Name\r\n                row.insertCell().textContent = program[0];\r\n                \/\/ Duration\r\n                row.insertCell().textContent = program[2];\r\n                \/\/ Degree\r\n                row.insertCell().textContent = program[3];\r\n                \/\/ Teaching (Language of instruction)\r\n                row.insertCell().textContent = program[1];\r\n                \/\/ Intake\r\n                const intakeCell = row.insertCell();\r\n                intakeCell.textContent = program[5];\r\n                intakeCell.classList.add(\"hide-column\");\r\n                \/\/ Scholarship Type\r\n                row.insertCell().textContent = program[6];\r\n                \/\/ Original Tuition\r\n                row.insertCell().textContent = program[7];\r\n                \/\/ Tuition After Scholarship\r\n                row.insertCell().textContent = program[8];\r\n                \/\/ Accommodation Fee\r\n                row.insertCell().textContent = program[9];\r\n                \/\/ Accommodation Fee After Scholarship\r\n                row.insertCell().textContent = program[10];\r\n                \/\/ Age Requirements\r\n                row.insertCell().textContent = program[11];\r\n            });\r\n        }\r\n\r\n        function filterPrograms() {\r\n            const filterValue = filterInput.value.toLowerCase();\r\n            const filteredData = allPrograms.filter((program) =>\r\n                program[0].toLowerCase().includes(filterValue)\r\n            );\r\n            updatePagination(filteredData);\r\n        }\r\n\r\n        function updatePagination(data) {\r\n            const totalPages = Math.ceil(data.length \/ rowsPerPage);\r\n            currentPage = Math.min(currentPage, totalPages);\r\n            currentPage = Math.max(currentPage, 1);\r\n\r\n            const start = (currentPage - 1) * rowsPerPage;\r\n            const end = start + rowsPerPage;\r\n            const pageData = data.slice(start, end);\r\n\r\n            populateTable(pageData);\r\n            pageInfo.textContent = `Page ${currentPage} of ${totalPages}`;\r\n            prevPageBtn.disabled = currentPage === 1;\r\n            nextPageBtn.disabled = currentPage === totalPages;\r\n        }\r\n\r\n        filterInput.addEventListener(\"keyup\", filterPrograms);\r\n        prevPageBtn.addEventListener(\"click\", () => {\r\n            currentPage--;\r\n            filterPrograms();\r\n        });\r\n        nextPageBtn.addEventListener(\"click\", () => {\r\n            currentPage++;\r\n            filterPrograms();\r\n        });\r\n\r\n        fetchAndPopulateTable();\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>University Programs University Programs Program Name Duration Degree Teaching Intake Scholarship Type Original Tuition (RMB\/year) Tuition After Scholarship (RMB\/year) Accommodation Fee (RMB\/year) Accommodation Fee After Scholarship (RMB\/year) Age Requirements Previous Next<\/p>\n","protected":false},"author":26,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-77","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/china-connect.net\/index.php?rest_route=\/wp\/v2\/pages\/77","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/china-connect.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/china-connect.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/china-connect.net\/index.php?rest_route=\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/china-connect.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=77"}],"version-history":[{"count":55,"href":"https:\/\/china-connect.net\/index.php?rest_route=\/wp\/v2\/pages\/77\/revisions"}],"predecessor-version":[{"id":555,"href":"https:\/\/china-connect.net\/index.php?rest_route=\/wp\/v2\/pages\/77\/revisions\/555"}],"wp:attachment":[{"href":"https:\/\/china-connect.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=77"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}