user3646954 user3646954 - 3 years ago 186
PHP Question

Adding Pagination (Keep post data) with jQuery

I am looking for a good way to setup pagination with my search form, I want it to display the data based on the amount of entries per page the user selects. This value they input under their search result and it is grabbed via $_POST['searchamount']. I then tried to setup a simple pagination following some tutorials, but I have been stuck with issues as the following pages won't work for showing any data, I believe its because my search script requires the $_POST['search'] value to be true meaning somebudy submit the form, and when clicking on the numbers to scroll through the pages of results, it will just redirect to search.php?page=1 for example. How do I add an additional way so that it can continue the search, while making it secure?

I was reading online there are some cool ways to do it with jQuery, I would prefer to have it like that where it is automatic to display the following results without leaving the page.

Here is an example of what I tried

<?php while($row = mysqli_fetch_array($result)): ?>
<td><?php echo $row['FactionName'];?></td>
<td><?php echo $row['MoneyBalanceFormatted'];?></td>
<td><?php echo $row['SpawnerWorthFormatted'];?></td>
<td><?php echo $row['BlockWorthFormatted'];?></td>
<td><?php echo $row['ItemWorthFormatted'];?></td>
<td><?php echo $row['TotalWorthFormatted'];?></td>
<td><?php echo $row['RichestMember'];?></td>
<?php endwhile;?>
$page_query = "SELECT * FROM ORDER BY TotalWorth DESC";
$page_result = mysqli_query($con, $page_query);
$total_records = mysqli_num_rows($page_result);
$total_pages = ceil($total_records/$record_per_page);
$start_loop = $page;
$difference = $total_pages - $page;
if($difference <= 5)
$start_loop = $total_pages - 5;
$end_loop = $start_loop + 4;
if($page > 1)
echo "<a href='search.php?page=1'>First</a>";
echo "<a href='search.php?page=".($page - 1)."'><<</a>";
for($i=$start_loop; $i<=$end_loop; $i++)
echo "<a href='search.php?page=".$i."'>".$i."</a>";
if($page <= $end_loop)
echo "<a href='search.php?page=".($page + 1)."'>>></a>";
echo "<a href='search.php?page=".$total_pages."'>Last</a>";


Although my example doesn't work properly at all, it even displays an error with mysqli_num_rows returning a boolean error.

Answer Source

You may be interested in datatables a jquery plugin for tables. Basically, you'd have to remove the pagination logic in you snippet so that only the table rendering bits remain. Then use javascript to enable pagination and entries per page selection on the table thanks to datatables. Check out their website for guides and examples.

I often have this sort of structure in my code. First a loop to populate table header, footer and body with data from SQL query.

    <?php if( isset($report['rows']) && count($report['rows']) > 0 ): ?>
        <div id="report-table-container">
            <table id="report-table" class="uk-table uk-table-hover uk-table-striped" cellspacing="0" width="100%">
                    <?php foreach( $report['cols'] as $k => $v ): ?>
                        <th> <?= $v ?> </th> 
                    <?php endforeach ?>
                    <?php foreach( $report['cols'] as $k => $v ): ?>
                        <th> <?= $v ?> </th> 
                    <?php endforeach ?>
                    <?php foreach($report['rows'] as $index => $entry): ?>
                        <?php foreach( $report['cols'] as $k => $v ): ?>
                        <td> <?= $entry[$k] ?> </td> 
                        <?php endforeach ?>
                    <?php endforeach ?>
        <?php endif ?>

Note the table has attribute id='report-table'. Use this in your javascript to enable pagination on that table. Like so

$(document).ready(function() {
        dom: 'tipl'

The parameter dom specifies elements to be added to your table. l for instance specifies a dropdown for selecting number of items per page. Ensure you have imported jQuery and DataTable js and css files.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download