php ajax multiple dropdown pagination

Question

I am trying to build a multiple dropdown search based on php and ajax. When the page is loaded or refreshed it should display full data list with pagination and once any dropdown item is changed it should then show only matching records with pagination. So far I have managed to do the full list loading part with pagination. For the dropdown change part- I have managed to get the loading of matching data with pagination. Here is the problem. For example, if I select BMW as car 'Make' pagination shows 2 page numbers (3 in the database, 2 per page). But when I click either of the page numbers- it goes back to the full car listing with pagination. here is my code(please ask if More details required)-

script

 $(document).ready(function() {
                $('#model').prop("disabled", true);
               
                function load_data(page){
                    $.ajax({
                        url: 'carlist_load.php',
                        type: 'POST',
                        data: {page_no:page},
                        success:function(data){
                            $("#carlist").html(data);
                        }
                    })
                }
                load_data();
                $(document).on("click","#pagination a", function(e){
                    e.preventDefault();
                    var page_id = $(this).attr("id");
                    load_data(page_id);
                }) 
               
               
               function load_datab(page){
                    $.ajax({
                        url: 'carlist_search.php',
                        type: 'POST',
                        data: {page_no:page},
                        success:function(data){
                            $("#carlist").html(data);
                        }
                    })
                }
                //load_datab();
                $(document).on("click","#pagination a", function(e){
                    e.preventDefault();
                    var page_id = $(this).attr("id");
                    load_datab(page_id);
                }) 

 $("#make").change(function() {
                     $('#model').prop("disabled", false);
                var selectedmake = $("#make").val();
                var selectedgearbox = $("#gearbox").val();
                $.ajax({
                    url: 'carlist_search.php',
                    method: 'POST',
                    data: {selected_make:selectedmake,selected_gearbox:selectedgearbox},
                    success:function(data){
                        $("#carlist").html(data);
                    }
                })
                });

**carlist_load.php**

    //load data
    $page_per_limit=2;
        $page='';
        if(isset($_POST['page_no'])){
            $page=$_POST['page_no'];
        }else{
            $page=1;
        }
        $offset = ($page-1)*$page_per_limit;
        $args=array(
                ':type'     =>  'general',  
            );
        $query="SELECT * FROM cars WHERE cartype=:type LIMIT {$offset},{$page_per_limit}";
     

          ............
    .............
    ...........
    $total_row=$stmt->rowCount();
        if($total_row>0)
        {

        foreach($result as $row){
                  $output  .= "<div class="col-lg-5 col-md-5 col-pad">
    .........

    //pagination

    $args=array(
                ':type'     =>  'general',  
            );
        $query="SELECT * FROM cars WHERE cartype=:type ";
    ......
    ......
    $total_row=$stmt->rowCount();
        $total_page = ceil($total_row/$page_per_limit);
        $prev_page=$page-1;
        $next_page=$page+1;
        
        $output .="<div class='pagination-box text-center ml-3' id='pagination'>
    ...........

**carlist_search.php**

    //load data
        $page_per_limit=2;
            $page='';
            if(isset($_POST['page_no'])){
                $page=$_POST['page_no'];
            }else{
                $page=1;
            }
            $offset = ($page-1)*$page_per_limit;
    
        $make   =  $_POST['selected_make'];
                    $model     =  $_POST['selected_model'];
                    $gearbox     =  $_POST['selected_gearbox'];
            $args=array(
                    ':type'     =>  'general',  
                );
            $query="SELECT * FROM cars WHERE cartype=:type
                    AND make like '%".$make."%'
                    AND model like '%".$model."%' 
                    AND gearbox like '%".$gearbox."%'
                    LIMIT {$offset},{$page_per_limit}";
         
    
              ............
        .............
        ...........
        $total_row=$stmt->rowCount();
            if($total_row>0)
            {
    
            foreach($result as $row){
                      $output  .= "<div class="col-lg-5 col-md-5 col-pad">
        .........
    
        //pagination
     
    
        $make   =  $_POST['selected_make'];
                    $model     =  $_POST['selected_model'];
                    $gearbox     =  $_POST['selected_gearbox'];
        $args=array(
                    ':type'     =>  'general',  
                );
            $query="SELECT * FROM cars WHERE cartype=:type 
    AND make like '%".$make."%'
                AND model like '%".$model."%' 
                AND gearbox like '%".$gearbox."%'
    ";
        ......
        ......
        $total_row=$stmt->rowCount();
            $total_page = ceil($total_row/$page_per_limit);
            $prev_page=$page-1;
            $next_page=$page+1;
            
            $output .="<div class='pagination-box text-center ml-3' id='pagination'>
        ...........

question from:https://stackoverflow.com/questions/66046544/php-ajax-multiple-dropdown-pagination

Answer 1

Waitting for answers