如何将PHP函数绑定到按钮，实现点击触发显示表格？

Got it, let's get your button hooked up to that PHP index function so clicking it generates and displays the student table. Here's a straightforward, step-by-step solution tailored to your CodeIgniter setup:

Step 1: Add Frontend Button & Table Container #

First, drop this HTML into your view file where you want the button and table to appear:

<!-- Button to trigger table generation -->
<button id="loadStudentTableBtn" class="btn btn-primary">Load Student Applications</button>

<!-- Container to hold the generated table -->
<div id="studentTableContainer"></div>

Step 2: Add JavaScript to Handle Button Clicks #

We'll use AJAX to fetch the table without reloading the page (smoother user experience). If you're using jQuery (common in CodeIgniter projects), add this script:

$(document).ready(function() {
    $('#loadStudentTableBtn').click(function(e) {
        e.preventDefault();
        
        // Show loading state to let users know something's happening
        $('#studentTableContainer').html('<p>Loading table...</p>');
        
        // Send request to your index method
        $.ajax({
            url: '<?= base_url("index.php/dashboard/index") ?>',
            type: 'GET',
            success: function(response) {
                // Insert the generated table into the container
                $('#studentTableContainer').html(response);
            },
            error: function(xhr, status, error) {
                $('#studentTableContainer').html('<p>Oops, failed to load the table. Error: ' + error + '</p>');
            }
        });
    });
});

If you prefer vanilla JavaScript (no jQuery), use this instead:

document.addEventListener('DOMContentLoaded', function() {
    const loadBtn = document.getElementById('loadStudentTableBtn');
    const tableContainer = document.getElementById('studentTableContainer');
    
    loadBtn.addEventListener('click', function(e) {
        e.preventDefault();
        tableContainer.innerHTML = '<p>Loading table...</p>';
        
        fetch('<?= base_url("index.php/dashboard/index") ?>')
            .then(response => {
                if (!response.ok) throw new Error('Request failed');
                return response.text();
            })
            .then(html => tableContainer.innerHTML = html)
            .catch(error => {
                tableContainer.innerHTML = '<p>Oops, failed to load the table. Error: ' + error.message + '</p>';
            });
    });
});

Step 3: Adjust Your PHP Index Method #

Modify your index() function to return just the table HTML when it gets an AJAX request (so it doesn't load your full page layout):

public function index() {
    // Check if this is an AJAX request (optional but good practice)
    if ($this->input->is_ajax_request()) {
        $student_applied_tbl = $this->create_table([
            "tbl_id" => "tbl_student_applied",
            "tbl_headers" => ["Student_Name","Service Name","Status",""],
            "tbl_rows" => []
        ], true, base_url("index.php/dashboard/get_applied"));
        
        // Output only the table HTML
        echo $student_applied_tbl;
        exit; // Stop execution to avoid loading extra page elements
    } else {
        // Handle regular page loads (keep your existing logic here)
        $this->load->view('dashboard');
    }
}

Step 4: Double-Check Your create_table Function #

Make sure your create_table() function returns the table HTML as a string, not just echoes it. If it currently echoes directly, update it to return instead:

// Before (bad for AJAX):
// echo $generated_table_html;

// After (good for AJAX):
return $generated_table_html;

Quick Notes #

• Don't forget to load the CodeIgniter URL helper (needed for base_url()). Load it in your controller with $this->load->helper('url'); or autoload it in application/config/autoload.php.
• Your tbl_rows array is empty right now—you'll want to populate it with actual student data later, but this setup will still render a table with headers.
• If you prefer a full page refresh instead of AJAX, you could use a form that submits to dashboard/index, but AJAX gives a much cleaner experience.

内容的提问来源于stack exchange，提问作者none