jQuery前端实现分页功能

前端freemarker代码

<#--分页操作-->
    <div id="privacy-operation-mark-page-div" align="right">
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="btn-group" id="page-div">
                        <select id="page_select" class="btn btn-default" style="height: 34px;">
                            <option value="20">20条/页</option>
                            <option value="40">40条/页</option>
                            <option value="80">80条/页</option>
                            <option value="200">200条/页</option>
                        </select>
                        <button class="btn btn-default" type="button" value="first">首页</button>
                        <button class="btn btn-default" type="button" value="up">上一页</button>
                        <button class="btn btn-default" type="button" value="down">下一页</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

2.jQuery代码

/**默认首页的当前页数组为空*/
let cur_page_array = [];

/**
 * 分页查询按钮功能实现
 */
$('#page-div').on('click', 'button', function() {
    // 获取分页按钮标识
    let value = $(this).attr("value");
    // 获取当前页展示行
    let curDisplayRows = $("table tr").length;

    // 初始化请求参数
    let operateInfoQueryVo = {};
    operateInfoQueryVo["rows"] = cur_rows;
    if ("first" === value) {
        // 请求上下页数组
        cur_page_array = [];
        // 开始查询首页数据
        queryFirstOperationMarkPageData();
    }

    // 处理上一页
    if ("up" === value) {
        // 根据页码判断是否到达首页
        if (cur_page_array.length <= 0) {
            return alert("已经到首页啦!");
        }

        // 设置游标,上一页游标,保证比当前页的最大ID大1
        operateInfoQueryVo["maxRecordId"] = parseInt(cur_page_array.pop()) + 1;

        initOperateInfoQueryVo(operateInfoQueryVo);
        // 执行分页查询
        processQuery(operateInfoQueryVo);
    }

    // 处理下一页
    if ("down" === value) {
        // 判断是否到达最后一页，如果展示行数小于每页应有的展示行数
        if (curDisplayRows < cur_rows) {
            return alert("已经到最后一页啦!");
        }

        // 把当前页最大的ID放入数据中，后续上一页使用
        cur_page_array.push(max_page_id);

        // 设置游标
        operateInfoQueryVo["maxRecordId"] = min_page_id;
        initOperateInfoQueryVo(operateInfoQueryVo);
        // 执行分页查询
        processQuery(operateInfoQueryVo);
    }
});

分页SQL

explain select * from waimai.wm_privacy_operation_info order by id desc limit 20;
# 中间页展示
explain select * from waimai.wm_privacy_operation_info where id < 323 order by id desc limit 20;