Dynamic HTML Table: Bootstrap, PHP, MySQL, JS/jQuery Filtering

First, ensure that you have included the necessary Bootstrap, jQuery, and JavaScript files in your HTML document. You can use CDN links or local files, depending on your preference.

Next, let's assume you have a PHP file that retrieves data from your MySQL database.

<?php
// Your PHP code to retrieve data from the MySQL database
// Assuming you have stored the data in an array called $data

// Generate the HTML table dynamically
echo '<table class="table table-responsive">';
echo '<thead>';
echo '<tr>';
echo '<th>Name</th>';
echo '<th>Email</th>';
echo '</tr>';
echo '</thead>';
echo '<tbody>';

foreach ($data as $row) {
    echo '<tr>';
    echo '<td>' . htmlentities($row['name']) . '</td>';
    echo '<td>' . htmlentities($row['email']) . '</td>';
    echo '</tr>';
}

echo '</tbody>';
echo '</table>';
?>

Once you have the HTML table populated with data, you can apply client-side filtering functionality using JavaScript and jQuery.

<!-- Add this HTML code after the PHP code in your document -->
<input type="text" id="filterInput" placeholder="Search by name">

<script>
$(document).ready(function() {
    // Add event listener to the filter input field
    $('#filterInput').on('keyup', function() {
        var value = $(this).val().toLowerCase();
        $('table tbody tr').filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
    });
});
</script>