.elementor-153 .elementor-element.elementor-element-72a5068{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:10px;--padding-bottom:10px;--padding-left:40px;--padding-right:40px;}.elementor-153 .elementor-element.elementor-element-72a5068:not(.elementor-motion-effects-element-type-background), .elementor-153 .elementor-element.elementor-element-72a5068 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#4747D7;}.elementor-153 .elementor-element.elementor-element-a339cfa{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-153 .elementor-element.elementor-element-055701a{text-align:center;}.elementor-153 .elementor-element.elementor-element-055701a .elementor-heading-title{color:#FFFFFF;}.elementor-153 .elementor-element.elementor-element-2f68fc0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-153 .elementor-element.elementor-element-d953dc9{--display:flex;}.elementor-153 .elementor-element.elementor-element-29bf846{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-153 .elementor-element.elementor-element-29bf846:not(.elementor-motion-effects-element-type-background), .elementor-153 .elementor-element.elementor-element-29bf846 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-153 .elementor-element.elementor-element-3593084{--display:flex;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-153 .elementor-element.elementor-element-72a5068{--padding-top:64px;--padding-bottom:64px;--padding-left:40px;--padding-right:40px;}}@media(max-width:767px){.elementor-153 .elementor-element.elementor-element-72a5068{--padding-top:64px;--padding-bottom:64px;--padding-left:16px;--padding-right:16px;}}/* Start custom CSS for container, class: .elementor-element-d953dc9 */<!-- Tambahkan judul -->
<h3 style="margin-bottom: 10px;">DOWNLOAD DOKUMEN AKADEMIK</h3>
<hr style="width:60px; border:2px solid #000; margin-bottom: 20px;">

<!-- Table structure -->
<table id="dokumenTable" class="display" style="width:100%">
  <thead>
    <tr>
      <th>No</th>
      <th>Judul</th>
      <th>Download</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Buku Pedoman Penyusunan Laporan Skripsi Fakultas Ilmu Komputer</td>
      <td><a href="#" target="_blank">⬇️</a></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Kalender Akademik 2025/2026</td>
      <td><a href="#" target="_blank">⬇️</a></td>
    </tr>
    <tr>
      <td>3</td>
      <td>Pedoman Akademik Universitas Amikom Purwokerto</td>
      <td><a href="#" target="_blank">⬇️</a></td>
    </tr>
    <tr>
      <td>4</td>
      <td>Tata Cara Yudisium</td>
      <td><a href="#" target="_blank">⬇️</a></td>
    </tr>
    <tr>
      <td>5</td>
      <td>Surat Keterangan Akreditasi SI Lulusan Sebelum 2012</td>
      <td><a href="#" target="_blank">⬇️</a></td>
    </tr>
    <tr>
      <td>6</td>
      <td>Surat Keterangan Akreditasi TI Lulusan Sebelum 2012</td>
      <td><a href="#" target="_blank">⬇️</a></td>
    </tr>
    <tr>
      <td>7</td>
      <td>Buku Profil Amikom</td>
      <td><a href="#" target="_blank">⬇️</a></td>
    </tr>
    <tr>
      <td>8</td>
      <td>Kalender Akademik 2024/2025 Gasal</td>
      <td><a href="#" target="_blank">⬇️</a></td>
    </tr>
    <tr>
      <td>9</td>
      <td>Kalender Akademik 2023/2024</td>
      <td><a href="#" target="_blank">⬇️</a></td>
    </tr>
    <tr>
      <td>10</td>
      <td>SK dan Sertifikat Akreditasi Prodi TI</td>
      <td><a href="#" target="_blank">⬇️</a></td>
    </tr>
  </tbody>
</table>

<!-- Load DataTables CSS & JS dari CDN -->
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.7/css/dataTables.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/2.0.7/js/dataTables.min.js"></script>

<!-- Aktifkan DataTables -->
<script>
jQuery(document).ready(function($) {
    $('#dokumenTable').DataTable({
        "paging": true,
        "searching": true,
        "ordering": true,
        "lengthChange": true,
        "pageLength": 10,
        "language": {
            "lengthMenu": "Tampilkan _MENU_ data per halaman",
            "zeroRecords": "Data tidak ditemukan",
            "info": "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
            "infoEmpty": "Tidak ada data",
            "infoFiltered": "(disaring dari total _MAX_ data)",
            "search": "Cari:"
        }
    });
});
</script>

<!-- Styling tambahan agar mirip contoh -->
<style>
#dokumenTable {
  border-collapse: collapse;
  width: 100%;
  font-size: 15px;
}
#dokumenTable th, #dokumenTable td {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
#dokumenTable th {
  background-color: #f5f5f5;
  text-align: left;
}
#dokumenTable a {
  text-decoration: none;
  font-size: 18px;
}
#dokumenTable a:hover {
  color: #007bff;
}
.dataTables_wrapper {
  margin-top: 20px;
}
</style>/* End custom CSS */