我怎样才能实现这个 twbs-pagination

Question

我正在使用 this plugin 对我的列表项进行分页，但我很困惑如何实现它来查询我的 table 以拉取并限制 10 个或根据我的需要并在其中显示在我的 <ul> 标签中。

这是我的样本。

Database.php

    class Database{

        protected $connection;


        public function __construct(PDO $connection)
        {
            $this->connection = $connection;
        }



        public function getData(){
            try{

                $cmd = $this->connection->prepare("SELECT COUNT(*) FROM names");
                $cmd->execute();
                $rows = $cmd->fetchColumn();

                $cmd=null;
                return $rows;

            }catch(PDOException $ex){

            }

        }
    public function display($start,$perpage){
        try{

            $cmd = $this->connection->prepare("SELECT name FROM names LIMIT ? , ?");
            $cmd->bindParam(1,$start);
            $cmd->bindParam(2,$perpage);
            $cmd->execute();

            $rows = $cmd->fetchAll(PDO::FETCH_ASSOC);
            $datali = '';
            foreach($rows as $r){
                $datali.='<li class="list-group-item">'.$r['name'].'</li>';
            }

            return $datali;


        }catch(PDOException $ex){

        }
    }


}

index.php

 require_once 'includes/config.php';
require_once 'includes/Database.php';

 $pdo = new PDO(HOST,USER,PASSWORD);
 $pdo->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
$connectdb = new Database($pdo);

$rows = $connectdb->getData();

 $page = $_GET['page'];
 $per_page = 5;

$pages = ceil( $rows / $per_page );

if($page == 0)
   $start = 0;
else
   $start = ( $page - 1 ) * $per_page;

$data =  $connectdb->display($start,$per_page);
?>
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
      <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript">

        $(function () {
            var pages = '<?php echo $pages;?>';
            $('#mylist-ul').twbsPagination({
               totalPages: pages,
              visiblePages: 7,

          href: '?page={{number}}'
            });
        }); 

        </script>

    </head>
    <body>
       <div class="wrapper">
         <?php echo $data ?>
        <ul class="list-group" id="mylist-ul"></ul>
       </div>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
       <script type="text/javascript" src="js/jquery.twbsPagination.min.js"></script>
    </body>
    </html>

Answer 1

这取决于您要显示的内容。如果你想显示来自数据库的数据，这里是一个例子：

假设您 table 中有 10 行数据。首先我们需要查询数据库并从 table

中获取所有数据

$result = $con->query("SELECT * FROM table");

现在我们需要计算得到的行数。

$rows = $result->num_rows;

假设我们希望在每个页面中显示 5 个项目。

 $per_page = 5;

我们用

计算页数

$pages = ceil( $rows / $per_page );

我们将获得 2 页。

现在我们将检查我们所在的页面并设置起点

    $page = isset( $_GET['page'] ) ? $con->real_escape_string($_GET['page']) : 0;
    $page == 0 ? $start = 0 : $start = ( $page - 1 ) * $per_page;
    $curpag = ( $start == 0 ) ? 1 : ( $start / $per_page ) + 1 ;

现在是显示来自 table

的数据的时候了

$result = $con->query("SELECT * FROM table ORDER BY id ASC LIMIT $start, $per_page");
while($row = $result->fetch_array(MYSQLI_ASSOC)):
//display data in table/list/etc.
endwhile;

我们添加分页元素

<ul id="pagination" class="pagination-sm"></ul>

最后我们初始化插件

    <script>
var pages = '<?php echo $pages;?>'; //We store the number of pages in a variable to use it below
    $('#pagination').twbsPagination({
            totalPages: pages,
            visiblePages: 7,
            href: '?page={{number}}' //Very important!
        });
    </script>

我怎样才能实现这个 twbs-pagination

How can I implement this twbs-pagination

javascript

php

jquery

pagination