Pagination when using ajax along PHP

Need some custom code changes to the phpBB core simple enough that you feel doesn't require an extension? Then post your request here so that community members can provide some assistance.

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Post Reply
User avatar
TJK
Registered User
Posts: 136
Joined: Sat Dec 26, 2015 9:10 pm
Name: Tolaso J Kos
Contact:

Pagination when using ajax along PHP

Post by TJK »

Calling all masters to help me with the following!! So, I want to have a live search on my site which I have implemented using ajax and php. However, I want to paginate the results echoing from PHP and I have no idea how to accomplish it. I have the following files


index.html

Code: Select all


<div class="app-search-box col"> 
        <input type="text"  class="form-control" id="live" autocomplete="off" placeholder="Search customer ..." />
</div><!--//app-search-box-->

<div class="app-wrapper">
	 <div class="app-content pt-3 p-md-3 p-lg-4">
		    <div class="container-xl">
			    <h1 class="app-page-title">Portal</h1>
			    <div class="app-card shadow-sm mb-4 border-left-decoration">
				    <div class="inner">
					    <div class="app-card-body p-4">
						    <div class="row gx-5 gy-3">
						        <div class="col-12 col-lg-12">
							        <div>Customer details are displayed here.  </div>
							         <div class="results" id="searchresults"> </div>
							    </div><!--//col-->
						    </div><!--//row-->
						    </div><!--//app-card-body-->
					     </div><!--//inner-->
			    </div><!--//app-card-->
</div><!--//app-wrapper-->  

functions/search.js

Code: Select all

$(document).ready(function(){
    $("#live").keyup(function(){
        var input = $(this).val();
        
        if(input !==''){
            $.ajax({
                url: "functions/search.php",
                method: "POST",
                data:{input:input},
                
                success:function(data){
                    $("#searchresults").html(data);
                }
            });
        }else{
            $("#searchresults").css("display", "none");
        }
    })
})

functions/search.php

Code: Select all

<?php
include '../../config.php';

if(isset($_POST['input'])){
    $input = $_POST['input'];
    $live_query = "SELECT * FROM customers WHERE TIN LIKE '$input%'";
    $live_query_result = mysqli_query($conn, $live_query);
    $number_of_results= mysqli_num_rows($live_query_result);

    if($number_of_results>0){?>
    
    <table class="table table-bordered table-striped mt-4">
        <thead>
            <tr>
                <th><center>#</center></th>
                <th><center>NAME</center></th>
                <th><center>EMAIL</center></th>
                <th><center>CODE</center></th>
                <th><center>REPRESENTATIVE</center></th>
                <th><center>CREDENTIALS</center></th>
            </tr>
        </thead>
        <tbody>
            <?php
            while($row = mysqli_fetch_assoc($live_query_result)){
                $ID=$row['ID'];
                $name=$row['Name'];
                $email = $row['Email'];
                $customer_code=$row['Customer_Code'];
                $rep =$row['Representative'];
                $credentials = 'Active';
            
            echo '<tr>
                <td><center>'.$ID.'</td>
                <td><center>'.$name.' </center></td>
                <td><center>'.$email.'</center></td>
                <td><center>'.$customer_code.'</center></td>
                <td><center>'.$rep.'</center></td>
                <td><center><span class="badge bg-success">'.$credentials.'</span></center></td>
            </tr>';
            
            }
            ?>
        </tbody>
        
    </table>
    
    <nav class="app-pagination mt-5">
					<ul class="pagination justify-content-center">
					    <li class="page-item"><a class="page-link" href="#">Prev</a></li>
					    <li class="page-item active"><a class="page-link" href="#">1</a></li>
					    <li class="page-item"><a class="page-link" href="#">Next</a></li>
 					</ul>
		</nav><!--//app-pagination-->
    
    <?php
        
    }else{
        echo "<h6 class='text-danger text-center mt-3'>No customers found!</h6>";
    }
}

?>
I'm aware of how to create a pagination, but not this type of pagination when I search live in the database. Oh, by the way I'm using jquery! So, any ideas?
Last edited by Mick on Thu Feb 10, 2022 8:29 am, edited 1 time in total.
Reason: Moved from GD.
Post Reply

Return to “phpBB Custom Coding”