laoma
/
admin_api


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
							<!-- resources/views/datatable.blade.php -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据表格展示</title>
    <!-- 引入 Bootstrap CSS（可选，用于美化表格） -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
    <h2 class="mb-4">{{$country}}</h2>
    <table class="table table-bordered" id="dataTable">
        <thead class="table-dark">
        <tr>
            <th>ID</th>
            <th>Abbreviation</th>
            <th>Name</th>
        </tr>
        </thead>
        <tbody>
        <!-- 数据行将通过 JavaScript 动态生成 -->
        </tbody>
    </table>
    <p id="noData" style="display: none;">没有数据显示。</p>
</div>

<!-- 引入 Bootstrap JS（可选，用于交互功能） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
    // 将 PHP 数组转换为 JSON 并传递给 JavaScript
    const data = @json($data);

    const tableBody = document.querySelector('#dataTable tbody');
    const noDataMsg = document.getElementById('noData');

    if (data.length > 0) {
        data.forEach(item => {
            const row = document.createElement('tr');

            const idCell = document.createElement('td');
            idCell.textContent = item.id;
            row.appendChild(idCell);

            const abbreviationCell = document.createElement('td');
            abbreviationCell.textContent = item.abbreviation;
            row.appendChild(abbreviationCell);

            const nameCell = document.createElement('td');
            nameCell.textContent = item.name;
            row.appendChild(nameCell);

            tableBody.appendChild(row);
        });
    } else {
        document.getElementById('dataTable').style.display = 'none';
        noDataMsg.style.display = 'block';
    }
</script>

</body>
</html>