使用数据表分页

在处理大量数据时，通常需要将它们分成多个页面以提高用户体验和性能。在Web开发中，我们通常使用数据表分页来实现这一功能。

常用的数据表分页算法

Limit offset算法

Limit offset算法最常用，根据页面大小和当前页码，在查询语句中使用LIMIT和OFFSET控制数据量和起始位置。

SELECT * FROM tableName LIMIT 10 OFFSET 20;

上述查询语句返回起始位置为20，长度为10的结果集。

滚动分页

滚动分页适用于数据集比较大的情况下，通过偏移量不断滚动到下一页数据，需要查询语句返回全部结果。

SELECT * FROM tableName WHERE id > lastId ORDER BY id LIMIT pageSize;

lastId为上一页最后一条记录的id，同时需要在每页记录中保留该id，以供下一页使用。减少了OFFSET的使用，可以大幅度提升查询性能。

实现数据表分页

后端实现

后端语言的支持不同，但通用的思路是将数据表中的数据查询出来，计算分页参数，返回当前页的数据和总页数等信息给前端。

下面以Python为例，使用flask和SQLAlchemy框架演示实现。

from flask import Blueprint, jsonify, request
from sqlalchemy import create_engine
from sqlalchemy.orm import sessionmaker

bp = Blueprint('bp', __name__)
engine = create_engine('mysql+pymysql://username:password@dbhost:dbport/dbname')
Session = sessionmaker(bind=engine)

pageSize = 10  # 每页记录数

@bp.route('/data')
def get_data_page():
    page = int(request.args.get('pageNum', 1))  # 获取页面
    session = Session()
    count = session.query(<table_name>).count()  # 总记录数
    data = session.query(<table_name>).offset((page-1) * pageSize).limit(pageSize)
    res = {'page': page, 'pageSize': pageSize, 'count': count, 'data': []}
    for d in data:
        res['data'].append({'id': d.id, 'name': d.name, 'age': d.age})
    return jsonify(res)

前端实现

前端通常使用AJAX向后端查询数据，基于响应结果渲染数据表和分页组件。

let currentPage = 1;

function getData(pageNum) {
    $.get('/data?pageNum='+pageNum, function(res){
        currentPage = pageNum;
        renderTable(res.data); // 渲染数据表
        renderPage(res.page, res.pageSize, res.count); // 渲染分页组件
    })
}

function renderPage(page, pageSize, total) {
    let pageHtml = '';
    let maxPage = Math.ceil(total / pageSize); // 最大页数
    if (page > 1) {
        pageHtml += '<a href="javascript:void(0);" onclick="getData(1)">首页</a>';
        pageHtml += '<a href="javascript:void(0);" onclick="getData('+(page-1)+')">上一页</a>';
    }
    for (let i = 1; i <= maxPage; i++) {
        if (i == page) {
            pageHtml += '<span>' + i + '</span>';
        } else {
            pageHtml += '<a href="javascript:void(0);" onclick="getData('+i+')">' + i + '</a>';
        }
    }
    if (page < maxPage) {
        pageHtml += '<a href="javascript:void(0);" onclick="getData('+(page+1)+')">下一页</a>';
        pageHtml += '<a href="javascript:void(0);" onclick="getData('+maxPage+')">尾页</a>';
    }
    $('#page').html(pageHtml);
}

getData(currentPage);  // 加载数据

总结

数据表分页是常用的数据处理方式，根据实际情况选择适合的分页算法，后端根据传入的查询参数，计算每页的数据量和起始位置，前端则负责渲染数据表和分页组件。通常需要注意性能优化，减少不必要的查询和数据传输，提高程序的效率。