我该如何实现这个 twbs 分页答案

【问题标题】：How can I implement this twbs-pagination我该如何实现这个 twbs 分页
【发布时间】：2015-08-31 17:02:09
【问题描述】：

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

这是我的示例。

数据库.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>

【问题讨论】：

改进了格式并划分了 html 和 javascript 代码以提高可读性。在您的问题中添加 JSFiddle 以获得更好的答案。

标签： javascript php jquery pagination

【解决方案1】：

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

假设您有一个包含 10 行数据的表。首先我们需要查询数据库并从表中获取所有数据

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

现在是时候显示表格中的数据了

$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>

【讨论】：

（第一个、上一个、下一个和最后一个）按钮是否也适用于该代码？
是的。该插件应该可以正常使用上面的代码。
我很困惑如何获取返回数据并动态显示？这像 jquery.ajax() 还是每次单击分页按钮时都会重新加载页面？
您可以使用 ajax 来加载内容，而无需重新加载或更改页面。我的示例使用 GET 变量根据数据库中的数据量创建页面。第一页将从 db 获得结果，例如 LIMIT 0,5（每页五个结果），然后当您按下下一页时，它将获得 LIMIT 6,10 等等。
你有 jquery.ajax 的例子吗？