WebStick/sd_card/www/admin/posteng/all.html

<br>
<div class="ui container">
    <h2 class="ui header">All Blog Posts</h2>
    <table class="ui celled table">
        <thead>
            <tr>
                <th>Post Name</th>
                <th>Edit</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody id="postTableBody">
            <!-- Rows will be dynamically loaded here -->
        </tbody>
    </table>
</div>

<script>
    $(document).ready(function() {
        // Dummy function to fetch posts from an API
        function fetchPosts() {
            // Simulated API response
            const posts = [
                { id: 1, name: "First Blog Post" },
                { id: 2, name: "Second Blog Post" },
                { id: 3, name: "Third Blog Post" }
            ];

            // Clear the table body
            $('#postTableBody').empty();

            // Populate the table with posts
            posts.forEach(post => {
                $('#postTableBody').append(`
                    <tr>
                        <td>${post.name}</td>
                        <td><button class="ui blue button edit-button" data-id="${post.id}">Edit</button></td>
                        <td><button class="ui red button delete-button" data-id="${post.id}">Delete</button></td>
                    </tr>
                `);
            });
        }

        // Call the fetchPosts function to load data
        fetchPosts();

        // Event listeners for Edit and Delete buttons
        $(document).on('click', '.edit-button', function() {
            const postId = $(this).data('id');
            alert(`Edit post with ID: ${postId}`);
        });

        $(document).on('click', '.delete-button', function() {
            const postId = $(this).data('id');
            alert(`Delete post with ID: ${postId}`);
        });
    });
</script>