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>

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

@foreach($datas as $country=>$data)


<div class="container mt-5">
    <h2 class="mb-4">{{$country}}</h2>
    <table class="table table-bordered" id="dataTable_{{$country}}">
        <thead class="table-dark">
        <tr>
            <th>ID</th>
            <th>Abbreviation</th>
            <th>Name</th>
        </tr>
        </thead>
        <tbody>
        <!-- 数据行将通过 JavaScript 动态生成 -->
        </tbody>
    </table>
</div>


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


    if (data_{{$country}}.length > 0) {
        data_{{$country}}.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);

            document.querySelector('#dataTable_{{$country}} tbody').appendChild(row);
        });
    } else {
    }
</script>
@endforeach
</body>
</html>