带有数字和点的分页Ajax

时间:2017-09-10 05:18:25

标签: jquery ajax pagination

我的分页工作正常,但是当我有20页时,分页编号会破坏我的HTML页面。

如何最小化5的分页数并在指示分页中有更多页面之前和之后动态插入...

PHP

public function paging($query,$records_per_page)
{
    $starting_position=0;
    if(isset($_GET["page_no"]))
    {
        $starting_position=($_GET["page_no"]-1)*$records_per_page;
    }
    $query2=$query." limit $starting_position,$records_per_page";
    return $query2;
}

public function paginglink($query,$records_per_page)
{

    $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 = 0;

        if(isset($_GET["page_no"]))
        {                   
            $current_page=$_GET["page_no"];
        }

            echo "<li class='page-item'><a href='#' class='page-link' data-href='?page_no=1'>First</a></li>";


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

            echo "<li class='page-item'><a href='#' class='page-link' data-href='?page_no=".$total_no_of_pages."'>Last</a></li>";

        ?></ul><?php
    }
}

AJAX

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

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

   $.ajax({
         url: url,
         success: function (response) {

           var html = $('<h1/>', {html : response}).find('#paginacao-ajax');
           $('#paginacao-ajax').html( html )              

         }
   });
})

我正在努力了解如何做以下事情:

例如,总共有50页

如果刚刚加载了该页面

  [Fist] [1][2][3][4][5] [...] [Last]

如果您正在查看第8页

  [Fist] [...] [8][9][10][11][12] [...] [Last]

如果您已经到达最后5页

  [Fist] [...] [46][47][48][49][50] [Last]

0 个答案:

没有答案