Ajax pagination

Question

Ajax pagination

Navigation

#1 by (1 votes)

0

I have a normal paging code, it's working correctly, but I'm not able to insert ajax into pagination.

Actually as I'm using functions, I do not know how to call the "paginglink" function in the AJAX url

Another point is that the code has $self = $_SERVER['PHP_SELF']; that returns the current url, how do I replace the $self variable in paging links when using Ajax?

<?php
        $query = "SELECT * FROM users ORDER BY id DESC";       
        $records_per_page=7;
        $newquery = $crud->paging($query,$records_per_page);
        $crud->dataview($newquery);
     ?>
    <tr>
        <td colspan="7" align="center">
            <nav aria-label="Page navigation example">
            <?php $crud->paginglink($query,$records_per_page); ?>
            </nav>
        </td>
    </tr>

class.crud.php

public function paginglink($query,$records_per_page)
    {

        $self = $_SERVER['PHP_SELF'];

        $stmt = $this->db->prepare($query);
        $stmt->execute();

        $total_no_of_records = $stmt->rowCount();

        if($total_no_of_records > 0)
        {
            ?><ul class="pagination"><?php
            $total_no_of_pages=ceil($total_no_of_records/$records_per_page);
            $current_page=1;
            if(isset($_GET["page_no"]))
            {
                $current_page=$_GET["page_no"];
            }
            if($current_page!=1)
            {
                $previous =$current_page-1;
                echo "<li class='page-item'><a class='page-link' href='".$self."?page_no=1'>First</a></li>";
                echo "<li class='page-item'><a class='page-link' href='".$self."?page_no=".$previous."'>Back</a></li>";

            }
            for($i=1;$i<=$total_no_of_pages;$i++)
            {
                if($i==$current_page)
                {
                    echo "<li class='page-item'><a class='page-link' href='".$self."?page_no=".$i."' style='color:red;'>".$i."</a></li>";
                }
                else
                {
                    echo "<li class='page-item'><a class='page-link' href='".$self."?page_no=".$i."'>".$i."</a></li>";
                }
            }
            if($current_page!=$total_no_of_pages)
            {
                $next=$current_page+1;
                echo "<li class='page-item'><a class='page-link' href='".$self."?page_no=".$next."'>Next</a></li>";
                echo "<li class='page-item'><a class='page-link' href='".$self."?page_no=".$total_no_of_pages."'>Last</a></li>";
            }
            ?></ul><?php
        }
    }

Ajax:

<script>
             $.ajax({  
                    url:"???",  
                    method:"POST",  
                    data:,  
                    success: ;  
                    }  
               }) 
    </script>

php ajax

asked by anonymous 09.09.2017 / 08:08

1 answer

Create an int variable that recognizes numbers in time format Should I use form or div?

score 1 · Accepted Answer

If you want to do paging via ajax, I suggest a minor edit in your code.

In the snippet where you put the link with the url number in href , I'd put it in data-href and get that value via Javascript.

Example:

"<a href='#' class='page-link' data-href='".$self."?page_no=".$previous."'>Back</a>";

Now, instead of making the request normally by clicking on the link with href , you could add a jQuery function, to make the ajax request for the url that is in data-href . For example:

$('.page-link').click(function (e) {
   e.preventDefault();

   var url = $(this).data('href');

   $.ajax({
         url: url,

         success: function (response) {
              $('#conteudo-da-paginacao').html(response)
         }
   });
})

update

The question author asked me about content loading the same page, so it needs to load only div , not all content.

You can use the load function of jQuery. It can only load a specific element of a particular page. See:

$('.page-link').click(function (e) {
   e.preventDefault();

   var url = $(this).data('href');

   $( "#conteudo-da-pagina" ).load( url + " #conteudo-da-pagina" );

})

load documentation