Loading Pagination Pages Inside of Data Table

[Xtremer360]

This page works except for one thing. With the pages in the footer I don't want them to go to a different link I just want it to display that pages data in the table without a page refresh. Anyone see a problem with me wanting to do something like that? Can it be done? If it can be done how would that be accomplished? I'm a beginner at jquery. So I'm just trying to learn as I go.

 

 

<?php
    // Include the database page
    include ('../inc/dbconfig.php');
    
    // Number of records to show per page
    $display = 4;
    
    if (isset($_GET['p']) && is_numeric($_GET['p'])) {
        $pages = $_GET['p'];
    } else { // Need to determine
        
        // Count the number of records
        $q = "SELECT COUNT(id) FROM templates";
        $r = mysqli_query($dbc, $q);
        $row = mysqli_fetch_array($r, MYSQLI_NUM);
        $records = $row[0];
        
        // Calculate the number of pages...
        if ($records > $display) { // More than 1 page.
            $pages = ceil($records/$display);
        } else {
            $pages = 1;
        }
    } // End of p IF.
    
    // Determine where in the database to start returning results...
    if (isset($_GET['s']) && is_numeric($_GET['s'])) {
        $start = $_GET['s'];
    } else {
        $start = 0;
    } // End of s IF.
    
    $query = "SELECT CONCAT_WS(' ', firstname, lastname) AS name, DATE_FORMAT(templates.datecreated, '%M %d, %Y') AS datecreated, templates.id, templatename FROM templates, handlers WHERE handlers.id = templates.creator_id LIMIT $start, $display";
    $result = mysqli_query ( $dbc, $query ); // Run The Query
    $rows = mysqli_num_rows($result);

?>
<script>
   $(document).ready(function() {
        $('a', $('div#addform')).click(function() {
            $('#innerContent').load('forms/' + $(this).attr('id') + '.php');
        });
    });
</script>
<!-- Title -->
		<div id="title" class="b2">
			<h2>Templates</h2>
			<!-- TitleActions -->
			<div id="titleActions">
				<!-- ListSearch -->
				<div class="listSearch actionBlock">
					<div class="search">
						<label for="search">Recherche</label>
						<input type="text" name="search" id="search" class="text" />
					</div>
					<div class="submit">
						<button type="submit" id="search-button" class="button"><strong><img src="img/icons/search_48.png" alt="comments" class="icon "/></strong></button>
					</div>
				</div>
				<!-- /ListSearch -->
				<!-- newPost -->
					<div id="addform" class="newPost actionBlock">
						<a href="#" id="addtemplate" class="button"><strong>Add New Template<img src="img/icons/add_48.png" alt="new post" class="icon "/></strong></a>
					</div>
				<!-- /newPost -->
			</div>
			<!-- /TitleActions -->
		</div>
		<!-- Title -->

            <!-- Inner Content -->
		<div id="innerContent">

			<!-- ListHeader -->
			<div id="listHeader">
				<p class="listInfos">
					You have <?php if($records == 0){echo '0';}else{echo $records;} ?> templates.
				</p>
				<div class="listActions">
					<form action="" method="post">
						<label for="actionSelect">With selected items: </label>
						<select class="select" name="actionSelect" id="actionSelect">
							<option>Edit</option>
							<option>Delete</option>
						</select>
						<button class="button small-button"><strong>Apply</strong></button>
					</form>
				</div>
			</div>
			<!-- /ListHeader -->
                <?php
                    if ($rows > 0) {
                ?>
                <!-- ListTable -->
			<table cellspacing="0" class="listTable" id="postList">
				<!-- Thead -->
				<thead>
					<tr>
						<th class="first"><div></div></th>
						<th><a href="#" title="Template Name">Template Name</a></th>
						<th><a href="#" title="Creator">Creator</a></th>
						<th class="last"><a href="#" title="Date Created">Date Created</a></th>
					</tr>
				</thead>
				<!-- /Thead -->
				<!-- Tfoot -->
				<tfoot>
					<tr>
						<td colspan="5">
							<div class="inner">
								<div class="paginate">
									<?php 
                                        
                                            if ($pages > 1) {
                                                
                                                // Determine what page the script is on:
                                                $current_page = ($start/$display) + 1;
                                                
                                                // If its not the first page, make a Previous button
                                                if ($current_page != 1) {
                                                    echo '<span class="prev disabled"><a href="templates.php?s=' . ($start - $display) . '$p=' . $pages . '"><<</a></span>';
                                                } 
                                                
                                                // Make all the numbered pages:
                                                for ($i = 1; $i <= $pages; $i++) {
                                                    if ($i != $current_page) {
                                                        echo '<span style="padding-left: 5px; padding-right: 5px;"><a href="templates.php?s=' . (($display * ($i - 1))). '&p=' . $pages . '">' . $i . '</a></span>';
                                                    } else {
                                                        echo '<span class="current roundedBordersLite">' . $i . '</span>';
                                                    }
                                                } // End of FOR Loop.
                                                
                                                // If its not the last page, make a Next button:
                                                if ($current_page != $pages) {
                                                    echo '<span class="next"><a href="#">>></a></span>';
                                                }
                                            } // End of links pages.
                                        
                                        ?>
								</div>
							</div>
						</td>
					</tr>
				</tfoot>
				<!-- /Tfoot -->
				<!-- Tbody -->
                    
				<tbody>
				<?php 
			        while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
                          echo '
                          <tr>
                          <td><input type=checkbox class=checkbox value="' . $row['id'] . '" /></td>
					  <td>' . $row['templatename'] . '</td>
					  <td>' . $row['name'] . '</td>
					  <td class=last>' . $row['datecreated'] . '</td>
					  </tr>';
                        }
                    ?>
				</tbody>
				<!-- /Tbody -->
			</table>
                    <?php
                        }
                    ?>
			<!-- /ListTable -->

		</div>
		<!-- /Inner Content -->

[brianlange]

Look at the ajax functionality in jQuery. Unless your loading all of the page info onto the page, you'll have to request from the server the new pages. The only way to do this without a page refresh is with ajax.

 

[Xtremer360]

I found a tablesorter/pagination plugin.