完美实现bootstrap分页查询

下面是关于“完美实现bootstrap分页查询”的完整攻略。

什么是bootstrap分页查询

Bootstrap是一个基于HTML、CSS、JavaScript的前端框架，它提供了强大的组件和样式，可以快速构建页面。而分页查询则是将大量数据分为若干页进行查询。

Bootstrap提供了分页组件，可以轻松实现分页效果。但是，在单纯使用Bootstrap分页时，需要手动计算每一页的数据。

因此，完美实现Bootstrap分页查询，需要结合后端进行数据的处理和传递。下面分别从前端和后端两个方面来进行介绍。

前端实现Bootstrap分页查询

页面模板

首先，需要在页面中引入Bootstrap的CSS和JavaScript文件，以及jQuery库。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap分页查询</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody id="table-data"></tbody>
    </table>
    <nav>
        <ul class="pagination" id="pagelist"></ul>
    </nav>
</body>
</html>

这是一个最基本的页面模板，包含了一个表格和一个分页组件。

获取后端数据

使用Ajax获取后端的数据，例如：

$(function() {
    load(1);
});

function load(page) {
    $.ajax({
        type: "POST",
        url: "getData.php",
        data: {page: page},
        dataType: "json",
        success: function(data) {
            // 处理数据...
        }
    });
}

这里使用了jQuery的Ajax方法，向后端的getData.php文件发送POST请求，并传递了当前页码page，数据类型为json。

处理数据

获取到后端传递的数据后，还需要对数据进行处理，以便显示在表格中。

以下是处理数据的示例代码：

function loadData(data) {
    var html = '';
    $.each(data, function(key, value) {
        html += '<tr>';
        html += '<td>' + value.id + '</td>';
        html += '<td>' + value.name + '</td>';
        html += '<td>' + value.age + '</td>';
        html += '<td>' + value.gender + '</td>';
        html += '</tr>';
    });
    $('#table-data').html(html);
}

这里使用了jQuery的each函数，遍历数据并生成HTML代码。

显示分页

最后，在处理数据的同时，需要生成分页组件并显示在页面上：

function loadPage(data) {
    var html = '<li><a href="javascript:void(0)" aria-label="Previous" onclick="javascript:load(' + (data.current_page - 1) + ')"><span aria-hidden="true">&laquo;</span></a></li>';
    for (var i = 1; i <= data.last_page; i++) {
        var active = '';
        if (i == data.current_page) {
            active = ' class="active"';
        }
        html += '<li' + active + '><a href="javascript:void(0)" onclick="javascript:load(' + i + ')">' + i + '</a></li>';
    }
    html += '<li><a href="javascript:void(0)" aria-label="Next" onclick="javascript:load(' + (data.current_page + 1) + ')"><span aria-hidden="true">&raquo;</span></a></li>';
    $('#pagelist').html(html);
}

这里生成了上一页、下一页和每一页的链接，并且为当前页码添加了active样式。

至此，前端的完美Bootstrap分页查询已经实现。

后端实现Bootstrap分页查询

前端实现了分页界面和数据请求，接下来需要后端提供数据来响应请求。

处理分页请求

首先，需要接收前端传递过来的请求：

$page = $_POST['page'];

这里使用了PHP中的POST方法获取请求中的页码。在实际代码中，还需要对页码进行验证和过滤。

查询数据

接下来，查询数据并返回给前端：

$page_size = 10; // 每页显示的记录数
$offset = ($page - 1) * $page_size; // 计算偏移量

// 查询数据库中的数据
$sql = "SELECT * FROM `user` LIMIT {$offset}, {$page_size}";
$result = $pdo->query($sql);
$data = $result->fetchAll(PDO::FETCH_ASSOC);

// 查询总记录数
$sql = "SELECT COUNT(*) FROM `user`";
$result = $pdo->query($sql);
$total = $result->fetchColumn();

// 计算总页数
$total_page = ceil($total / $page_size);

// 返回数据
echo json_encode(array(
    'current_page' => $page,
    'last_page' => $total_page,
    'data' => $data,
));

这里计算出了每页显示的记录数和偏移量，查询数据库中的数据，并计算总页数，最后将数据转换为JSON格式返回。

示例说明

这里为大家提供两个完整的示例，分别是使用PHP和Python实现分页查询。

PHP示例

getData.php文件内容如下：

<?php
// 数据库连接参数
$db_host = 'localhost';
$db_name = 'test';
$db_user = 'root';
$db_pass = 'root';

// 连接数据库
$dsn = "mysql:host={$db_host};dbname={$db_name};charset=utf8";
$pdo = new PDO($dsn, $db_user, $db_pass);

// 处理分页请求
$page = $_POST['page'];
$page_size = 10; // 每页显示的记录数
$offset = ($page - 1) * $page_size; // 计算偏移量

// 查询数据库中的数据
$sql = "SELECT * FROM `user` LIMIT {$offset}, {$page_size}";
$result = $pdo->query($sql);
$data = $result->fetchAll(PDO::FETCH_ASSOC);

// 查询总记录数
$sql = "SELECT COUNT(*) FROM `user`";
$result = $pdo->query($sql);
$total = $result->fetchColumn();

// 计算总页数
$total_page = ceil($total / $page_size);

// 返回数据
echo json_encode(array(
    'current_page' => $page,
    'last_page' => $total_page,
    'data' => $data,
));

Python示例

getData.py文件内容如下：

#!/usr/bin/env python
# -*- coding: utf-8 -*-
import json
import pymysql

# 数据库连接参数
db_host = 'localhost'
db_name = 'test'
db_user = 'root'
db_pass = 'root'

# 连接数据库
conn = pymysql.connect(host=db_host, user=db_user, password=db_pass, db=db_name, charset='utf8')

# 处理分页请求
page = int(input("请输入页码："))
page_size = 10  # 每页显示的记录数
offset = (page - 1) * page_size  # 计算偏移量

# 查询数据库中的数据
sql = "SELECT * FROM `user` LIMIT %s, %s"
cursor = conn.cursor()
cursor.execute(sql, (offset, page_size))
data = cursor.fetchall()

# 查询总记录数
sql = "SELECT COUNT(*) FROM `user`"
cursor.execute(sql)
total = cursor.fetchone()[0]

# 计算总页数
total_page = int(total / page_size) + (1 if (total % page_size) != 0 else 0)

# 关闭数据库
cursor.close()
conn.close()

# 返回数据
data_dict = {
    'current_page': page,
    'last_page': total_page,
    'data': list(map(lambda x: {'id': x[0], 'name': x[1], 'age': x[2], 'gender': x[3]}, data)),
}
print(json.dumps(data_dict))

总结

以上就是关于“完美实现Bootstrap分页查询”的完整攻略。通过前端和后端的配合，我们可以轻松实现分页查询功能，为用户提供更好的查询体验。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：完美实现bootstrap分页查询 - Python技术站