Why doesn't pagination come before/after tbody but within it?

Question

I've got a table with users based on the number parameter .
I build in a filter which listens to input and does an AJAX call every time with this filter on the name . Howether the table build contains rows with the users and sets the pagination ABOVE the whole table.
When im filling the tbody with the response of the AJAX call it sets the pagination WITHIN the table..
How could this be solved? The filter function works perfect, its just the pagination that doesn't want to.

Original Page

<table id="users" class="ui-widget ui-widget-content">
    <thead>
      <tr class="ui-widget-header ">
        <th>Name</th>
        <th>Bank</th>
        <th>IBAN</th>
      </tr>
    </thead>
    <tbody>
    <?php
    try {   
        //Find out how many items are in the table
        $total = $pdo->query('SELECT COUNT(*) FROM tatble1 WHERE nr = ' . $nr)->fetchColumn();

    if($total > 0){

        //Setting Limit, Offset, End, Total and prepared Query
        ...

        // Do we have any results?
        if ($stmt->rowCount() > 0) {

            // Define how we want to fetch the results
            $stmt->setFetchMode(PDO::FETCH_ASSOC);

            // Display the results
            foreach ($stmt as $row) {
                echo
                '<tr data-zp-id=' . $row["id"] . '>
                    <td>' . $row["name"] . '</td>
                    <td>' . $row["bank"] . '</td>
                    <td>' . $row["iban"] . '</td>
                </tr>';
            }

            echo '<div id="pagination">';
            // The "back" link
            $prevlink = ($page > 1) ? 
              '<a href="?'.$cutUrl.'&page=1" title="Erste Seite"><button class="faecher">&laquo;</button></a> <a href="?'.$cutUrl.'&page=' . ($page - 1) . '" title="Vorherige Seite"><button class="faecher">&lsaquo;</button></a>' : 
              '<button class="faecher" id="fehlt">&laquo;</button> <button class="faecher" id="fehlt">&lsaquo;</button>';

                // The "forward" link
                $nextlink = ($page < $pages) ? 
                  '<a href="?'.$cutUrl.'&page=' . ($page + 1) . '" title="Nächste Seite"><button class="faecher">&rsaquo;</button></a> <a href="?'.$cutUrl.'&page=' . $pages . '" title="Letzte Seite"><button class="faecher">&raquo;</button></a>' : 
                  '<button class="faecher" id="fehlt">&rsaquo;</button> <button class="faecher" id="fehlt">&raquo;</button>';

                // Display the paging information
                echo '<div id="paging">
                        <p>', $prevlink, ' Seite ', $page, ' von ', $pages, ' | Zeige ', $start, ' - ', $end, ' von ', $total, ' Ergebnissen ', $nextlink, ' </p>
                     </div>
            </div>';
        }

    } else {
        echo '<h2>Keine Personen gefunden!</h2>';
    }
} catch (Exception $e) {
    echo '<p>', $e->getMessage(), '</p>';
}

?>

</tbody>
</table><br/><br/>
<input type="text" id="filter" value=""/>  

How it's looking : Filter function

$('#filter').on( 'input' , function(){
        var filter_input = $(this).val();
        $.ajax({
            url : 'ajax4.php',
            type : 'POST',
            data : {
                fil : filter_input
            }
        })
        .done (function(response) { console.log("Response : \n" + response); $('tbody').html(response); })
        .fail (function(jqXHR, textStatus, errorThrown ) {  alert('[ui-state-error ' + jqXHR.status + "] "  + textStatus + " : " + errorThrown); });

        //Reset
        if(filter_input == "" || filter_input.length < 1){
            window.location.reload(true);
        }
    });

AJAX Call

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
    session_start();
    include "../connect.php";

(int) $nr = $_SESSION["nr"];
(string) $filter = $_POST["fil"];

try {   
    //Find out how many items are in the table
    $total = $pdo->query('SELECT COUNT(*) table1 WHERE nr = ' . $nr . ' AND name LIKE "%' . $filter . '%"')->fetchColumn();

    if($total > 0){

        //Setting Limit, Offset, End, Total and prepared Query
        ...

        // Prepare the paged query
        ...

        $stmt->execute();           

        // Do we have any results?
        if ($stmt->rowCount() > 0) {

            echo '<div id="pagination">';
                // The "back" link
                $prevlink = ($page > 1) ? '<a href="?'.$cutUrl.'&page=1" title="Erste Seite"><button class="faecher">&laquo;</button></a> <a href="?'.$cutUrl.'&page=' . ($page - 1) . '" title="Vorherige Seite"><button class="faecher">&lsaquo;</button></a>' : '<button class="faecher" id="fehlt">&laquo;</button> <button class="faecher" id="fehlt">&lsaquo;</button>';

                // The "forward" link
                $nextlink = ($page < $pages) ? '<a href="?'.$cutUrl.'&page=' . ($page + 1) . '" title="Nächste Seite"><button class="faecher">&rsaquo;</button></a> <a href="?'.$cutUrl.'&page=' . $pages . '" title="Letzte Seite"><button class="faecher">&raquo;</button></a>' : '<button class="faecher" id="fehlt">&rsaquo;</button> <button class="faecher" id="fehlt">&raquo;</button>';

                // Display the paging information
                echo '<div id="paging"><p>', $prevlink, ' Seite ', $page, ' von ', $pages, ' | Zeige ', $start, ' - ', $end, ' von ', $total, ' Ergebnissen ', $nextlink, ' </p></div>
            </div>';

            // Define how we want to fetch the results
            $stmt->setFetchMode(PDO::FETCH_ASSOC);

            // Display the results
            foreach ($stmt as $row) {
                echo
                '<tr data-zp-id=' . $row["id"] . '>
                    <td>' . $row["name"] . '</td>
                    <td>' . $row["bank"] . '</td>
                    <td>' . $row["iban"] . '</td>
                </tr>';
            }

            /*tried the pagination code here, didn't get shown or anything happened*/
        }

    } else {
        echo '<h2>Keine Personen gefunden!</h2>';
    }
} catch (Exception $e) {
    echo '<p>', $e->getMessage(), '</p>';
}

} ?>

Which looks like :

Answer 1

Write one PHP file that output your pagination and after the complete table, something like this:

ajax4.php should output following

<div id="your-tables-container">
    <div id="pagination">
        ...
    </div>

    <table>
        <thead>
            <tr class="ui-widget-header">
                <th>Name</th>
                <th>Bank</th>
                <th>IBAN</th>
            </tr>
        </thead>
        <tbody>
            ...
        </tbody>
    </table>
</div>

Javascript for AJAX call should update the complete table, not just TBODY

Your AJAX call should then look like this:

// also try jQuery.load() method. It makes an AJAX call and automatically replace the innerHtml of the selected DOM-element: http://api.jquery.com/load/

$.ajax({
    url : 'ajax4.php',
    type : 'POST',
    data : {
        fil : filter_input
    }

}).done(function(response) {
    console.log("Response : \n" + response);
    $('#your-tables-container').html(response);

}).fail(function(jqXHR, textStatus, errorThrown ) {
    alert('[ui-state-error ' + jqXHR.status + "] "  + textStatus + " : " + errorThrown);
});

in your original PHP file you have the same/similar code again, is it necessary?

And in your original PHP file you should avoid to write your table code twice. Use require or maybe file_get_contents or something like that:

<?php
    require_once('/path/to/ajax4.php');

    // or maybe

    echo file_get_contents('/path/to/ajax4.php?parameter=if_you_need_it');
?>