当前位置： 首页 > article >正文

Frontend - 分页（针对 python / Django ）

article 2025/1/5 6:27:25

目录

一、同个文件内（方式一）

1. 前端 html

2. 定义分页界面

3. 获取分页数据

4.后端根据前端分页需求，整理分页数据

5.显示情况

6. JsonResponse 相关知识

二、不同文件内依旧有效（方式二，更优化）

1. 前端html

2. 定义分页界面（可放在独立的js文件内，可作为公共方法）

3. 获取分页数据（和html同文件）

4. 后端根据前端分页需求，整理分页数据

5. 显示情况

该分页功能是针对Django的Paginator、JsonResponse的回传方式，以及前端Ajax的POST请求。

一、同个文件内（方式一）

1. 前端 html

<div class="table_content table_border H_percent_60">
    <table id="dt_list" class="table table-striped table_view ">
        <thead>
            {% for c in col %} <!-- col是get请求时返回的标题列表-->
            <th>{{ c }}</th>
            {% endfor %}
        </thead>
    </table>
     <!-- 分页 -->
    <div class="dataTables_wrapper"> <!-- 自定义datatable的分页-->
        <div class="row" style="padding-right: 15px;">
            <div class="dataTables_paginate paging_simple_numbers" id="dt_list_paginate">
                <ul id="id_page" class="pagination"></ul>
            </div>
        </div>
    </div>
</div>

2. 定义分页界面

function get_page_html(paginationElement, totalPages, currentPage){
    paginationElement.innerHTML = '';
    // 上一页按钮
    let prevLi = document.createElement('li');  // li标签（排列）
    let prevLink = document.createElement('a'); // a标签（显示文字+绑定点击事件）
    prevLink.textContent = 'Previous'; // 设置显示文字（必须是字符串）
    prevLink.onclick = () => {
        if (currentPage > 1) {
            currentPage--; //只作用于onclick方法中（currentPage在onclick方法外时，没有减1）
        }
        get_query_data(currentPage); // 执行上一页数据的请求
        return false; // 避免a标签#默认跳转
    };
    prevLi.className = 'paginate_button'; // 设置样式（比如和dataTable的显示样式一致）
    prevLi.appendChild(prevLink); // 将a标签插入li标签
    paginationElement.appendChild(prevLi);// 将li标签插入总分页结构
    
    // 首页页码按钮
    let firstPageNumberLi = document.createElement('li');
    let firstPageNumberLink = document.createElement('a');
    firstPageNumberLink.textContent = '1';
    firstPageNumberLink.onclick = () => {
        get_query_data(1); // 执行第一页数据的请求
        return false;
    };
    if (currentPage === 1) { // active 设置当前页的li标签高亮
        firstPageNumberLi.className = 'paginate_button active';
    } else {
        firstPageNumberLi.className = 'paginate_button';
    }
    firstPageNumberLi.appendChild(firstPageNumberLink);
    paginationElement.appendChild(firstPageNumberLi);
    
    // 针对省略号按钮、数字按钮
    let startPage = Math.max(2, currentPage - 3);  // 其中，3是设置当前页码左边的显示个数
    let endPage = Math.min(totalPages-1, currentPage + 3); // 其中，3是设置当前页码右边的显示个数
    
    // 省略号按钮
    if (startPage > 2) {
        let pageNumberLi = document.createElement('li');
        let pageNumberLink = document.createElement('a');
        pageNumberLink.textContent = '...';
        // pageNumberLi.className = 'paginate_button disabled'; // 设置按钮是datatable的button样式、不可操作的样式（不可操作的样式设置好后，下面的onclick事件就需要注释掉）
        pageNumberLink.onclick = () => {
            get_query_data(startPage);// 执行省略号某页数据的请求
            return false;
        };
        pageNumberLi.className = 'paginate_button';
        pageNumberLi.appendChild(pageNumberLink);
        paginationElement.appendChild(pageNumberLi);
    }
    
    // 数字按钮
    for (let i = startPage; i <= endPage; i++) {
        let pageNumberLi = document.createElement('li');
        let pageNumberLink = document.createElement('a');
        pageNumberLink.textContent = i.toString();
        pageNumberLink.onclick = () => {
            get_query_data(i);// 执行某页数据的请求
            return false;
        };
        if (i === currentPage) {
            pageNumberLi.className = 'paginate_button active';// 设置按钮是datatable的button样式、高亮的样式（className样式的名称需同时设置，用空格隔开，而不能分开多次设置，只会最后一次生效）
        } else {
            pageNumberLi.className = 'paginate_button';
        }
        pageNumberLi.appendChild(pageNumberLink);
        paginationElement.appendChild(pageNumberLi);
    }
    
    // 省略号按钮
    if (endPage < totalPages-1) {
        let pageNumberLi = document.createElement('li');
        let pageNumberLink = document.createElement('a');
        pageNumberLink.textContent = '...';
        pageNumberLink.onclick = () => {
            get_query_data(endPage);// 执行省略号某页数据的请求
            return false;
        };
        pageNumberLi.className = 'paginate_button';
        pageNumberLi.appendChild(pageNumberLink);
        paginationElement.appendChild(pageNumberLi);
    }
        
    // 尾页页码按钮
    if(totalPages != 1){ // 保证只有1页时，不会重复出现两次第1页
        let totalPageNumberLi = document.createElement('li');
        let totalPageNumberLink = document.createElement('a');
        totalPageNumberLink.textContent = totalPages.toString(); // 设置显示文字（必须是字符串）
        totalPageNumberLink.onclick = () => {
            get_query_data(totalPages); // 执行最后一页数据的请求
            return false;
        };
        if (currentPage === totalPages) { // active 设置当前页的li标签高亮
            totalPageNumberLi.className = 'paginate_button active';
        } else {
            totalPageNumberLi.className = 'paginate_button';
        }
        totalPageNumberLi.appendChild(totalPageNumberLink);
        paginationElement.appendChild(totalPageNumberLi);
    }
    
    // 下一页按钮
    let nextLi = document.createElement('li');
    let nextLink = document.createElement('a');
    nextLink.textContent = 'Next';
    nextLink.onclick = () => {
        if (currentPage < totalPages) {
            currentPage++;//只作用于onclick方法中（currentPage在onclick方法外时，没有递增1）
        }
        get_query_data(currentPage); // 执行下一页数据的请求
        return false;
    };
    nextLi.className = 'paginate_button';
    nextLi.appendChild(nextLink);
    paginationElement.appendChild(nextLi);
}

3. 获取分页数据

var paginationElement = document.getElementById('id_page'); // 分页
$("#id_btn").click(function () {
     get_query_data(1); // 点击查询，默认显示首页数据
});

function get_query_data(currentPage) {
   $.ajax({
        url: window.location.pathname, 
        type: "POST",
        data: {
            "currentPage":currentPage, //当前页码
        },
        beforeSend: function () {
            $("#id_btn").attr({ disabled: true });
        },
        success: function (reply) {
            if (reply.result) {
                let page_data = reply.data['page_data']; //分页功能所需数据
                get_page_html(paginationElement, page_data['all_pages_num'], page_data['current_page_num']) // 执行分页。参数分别为分页组件、分页数据的总页码、当前页码
            }
	             else {
                 paginationElement.innerHTML = ''; // 不显示分页器
            }
        },
        complete: function () {
            $("#id_btn").attr({ disabled: false });
        },
    });
}

4.后端根据前端分页需求，整理分页数据

from django.core.paginator import Paginator #分页所需依赖
class test(View):
    # 只是部分代码    
    def post(self, request):
        try:
            # 获取基本信息
           data = request.POST
		   res_list = [[1,"数据结构","教育",45.00], [1,"数据库原理","教育",34.00]]
                    paginator = Paginator(res_list, 10) # 分页器（10是当前页显示的行数）
           current_page_num = int(data.get('currentPage', 1)) # 当前页码
           page_data = {'all_pages_num': paginator.num_pages, # 总页数
                        'current_page_num': current_page_num, # 当前页码
                        'current_page_data': paginator.page(current_page_num).object_list} # 当前呈现数据
           return JsonResponse(page_data)

 5.显示情况

6. JsonResponse 相关知识

Backend - Django JsonResponse & HttpResponse_django jsonresponse safe-CSDN博客

二、不同文件内依旧有效（方式二，更优化）

1. 前端html

<div class="table_content table_border H_percent_60">
    <table id="dt_list" class="table table-striped table_view ">
        <thead>
            {% for c in col %} <!-- col是get请求时返回的标题列表-->
            <th>{{ c }}</th>
            {% endfor %}
        </thead>
    </table>
    <!-- 分页 -->
    <div class="dataTables_wrapper"> <!-- 自定义datatable的分页-->
        <div class="row" style="padding-right: 15px;">
            <div class="dataTables_paginate paging_simple_numbers" id="dt_list_paginate">
                <ul id="id_page" class="pagination"></ul>
            </div>
        </div>
    </div>
</div>

2. 定义分页界面（可放在独立的js文件内，可作为公共方法）

/**
 * dataTable 分页（给页码标签增添点击事件、设置样式）
 * @pagination_ele 页码功能的位置 
 * @show_txt li标签显示的文字
 * @style_name li标签的样式
 * @is_click 是否添加点击事件 
 * @current_page 点击事件中跳转的页码值
 * @get_query_data 执行的方法
 * @return pagination_ele
 */
function set_dt_pagination(pagination_ele, show_txt, style_name, is_click=false, current_page=1, get_query_data=null){
    let eleLi = document.createElement('li');
    let eleLink = document.createElement('a');
    eleLink.textContent = show_txt;
    if(is_click){
        eleLink.onclick = () => {
            get_query_data(current_page); // get_query_data并没有立马被调用，而是定义在onclick中，只有用户点击时才真正的被触发。
            return false;
        };
    }
    eleLi.className = style_name;
    eleLi.appendChild(eleLink);
    pagination_ele.appendChild(eleLi);
    return pagination_ele;
}

/**
 * dataTable 分页（设置页码标签位置、判断当前页码）
 * @paginationElement 需要渲染的分页组件
 * @totalPages 总页数 
 * @currentPage 当前页码
 * @get_query_data 执行的方法
 */
function get_page_html(paginationElement, totalPages, currentPage, get_query_data){
    paginationElement.innerHTML = '';
    // 上一页按钮
    let prePage = currentPage;
    if (currentPage > 1) {
        prePage = currentPage-1;
    }
    paginationElement = set_dt_pagination(paginationElement, 'Previous', 'paginate_button', true, prePage, get_query_data); // get_query_data不能加括号，只是传递方法
    
    // 首页页码按钮            
    if (currentPage === 1) { // active 设置当前页的li标签高亮
        style_name = 'paginate_button active';
    } else {
        style_name = 'paginate_button';
    }
    paginationElement = set_dt_pagination(paginationElement, '1', style_name, true, 1, get_query_data); // get_query_data不能加括号，只是传递方法
    // 针对省略号按钮、数字按钮
    let startPage = Math.max(2, currentPage - 1);
    let endPage = Math.min(totalPages-1, currentPage + 1);
    // 左边的省略号按钮（可点击）
       if (startPage > 2) {
        // paginationElement = set_dt_pagination(paginationElement, '...', 'paginate_button disabled'); // 设置按钮是datatable的button样式、不可点击的样式
        paginationElement = set_dt_pagination(paginationElement, '...', 'paginate_button', true, startPage, get_query_data);
    }
    // 数字按钮
    for (let i = startPage; i <= endPage; i++) {              
        if (currentPage === i) { // active 设置当前页的li标签高亮
            style_name = 'paginate_button active';
        } else {
            style_name = 'paginate_button';
        }
        paginationElement = set_dt_pagination(paginationElement, i.toString(), style_name, true, i, get_query_data); // get_query_data不能加括号，只是传递方法
    }
    // 右边的省略号按钮（可点击）
    if (endPage < totalPages-1) {
        // paginationElement = set_dt_pagination(paginationElement, '...', 'paginate_button disabled'); // 设置按钮是datatable的button样式、不可点击的样式
        paginationElement = set_dt_pagination(paginationElement, '...', 'paginate_button', true, endPage, get_query_data);
    }
    
    // 尾页页码按钮
    if(totalPages != 1){ // 保证只有1页时，不会重复两次第一页
        if (currentPage === totalPages) { // active 设置当前页的li标签高亮
            style_name = 'paginate_button active';
        } else {
            style_name = 'paginate_button';
        }
        paginationElement = set_dt_pagination(paginationElement, totalPages.toString(), style_name, true, totalPages, get_query_data); // get_query_data不能加括号，只是传递方法
    }

    // 下一页按钮
    let nextPage = currentPage;
    if (currentPage < totalPages) {
        nextPage = currentPage+1;
    }
    paginationElement = set_dt_pagination(paginationElement, 'Next', 'paginate_button', true, nextPage, get_query_data); // get_query_data不能加括号，只是传递方法
}

3. 获取分页数据（和html同文件）

var paginationElement = document.getElementById('id_page'); // 分页。对应模板的id_page的组件
$("#id_btn").click(function () {
     get_query_data(1); // 点击查询，默认显示首页数据
});
function get_query_data(currentPage) {
   $.ajax({
        url: window.location.pathname, 
        type: "POST",
        data: {
            "currentPage":currentPage, //当前页码
        },
        beforeSend: function () {
            $("#id_btn").attr({ disabled: true });
        },
        success: function (reply) {
            if (reply.result) {
                let page_data = reply.data['page_data']; //分页功能所需数据
                get_page_html(paginationElement, page_data['all_pages_num'], page_data['current_page_num'], get_query_data) // 执行分页。参数分别为分页组件、分页数据的总页码、当前页码、分页方法（第四个参数get_query_data保证在不同js代码文件中也能执行。看似运用了递归，但其实在get_page_html中并没有立马调用它，而是onclick规定只有用户点击时才真正的被触发）
            } else {
                 paginationElement.innerHTML = ''; // 不显示分页器
             }
        },
        complete: function () {
            $("#id_btn").attr({ disabled: false });
        },
    });
}

4. 后端根据前端分页需求，整理分页数据

from django.core.paginator import Paginator #分页所需依赖
class test(View):
    # 只是部分代码    
    def post(self, request):
        try:
            # 获取基本信息
           data = request.POST
		   res_list = [[1,"数据结构","教育",45.00], [1,"数据库原理","教育",34.00]]
                    paginator = Paginator(res_list, 10) # 分页器（10是当前页显示的行数）
           current_page_num = int(data.get('currentPage', 1)) # 当前页码
           page_data = {'all_pages_num': paginator.num_pages, # 总页数
                        'current_page_num': current_page_num, # 当前页码
                        'current_page_data': paginator.page(current_page_num).object_list} # 当前呈现数据
return JsonResponse(page_data)

5. 显示情况


http://www.kler.cn/a/461848.html

相关文章：

  • BP神经网络的反向传播算法
  • 如何逐步操作vCenter修改DNS服务器？
  • 【开源社区openEuler实践】hpcrunner
  • 【AUTOSAR 基础软件】Can模块详解（Can栈之驱动模块）
  • 【数据仓库金典面试题】—— 包含详细解答
  • OFDM学习-（二）长短序列和PPDU整体数据处理流程
  • SpiderFlow平台v0.5.0内置变量及自定义函数
  • AAL省电效果对比
  • trie树算法--c语言
  • 解决Spring boot集成quartz时service注入失败为null的问题
  • 【目标跟踪】checkpoint文件到底是什么?
  • 网页单机版五子棋小游戏项目练习-初学前端可用于练习~
  • 基于W2605C语音识别合成芯片的智能语音交互闹钟方案-AI对话享受智能生活
  • MySQL DBA需要掌握的 7 个问题
  • 使用 Vue CLI 创建 Vue.js 项目的详细指南
  • 【DevOps】Jenkins部署
  • Java jni调用nnom rnn-denoise 降噪
  • WebRTC的线程事件处理
  • 五、其他核心概念
  • 基于SpringBoot在线竞拍平台系统功能实现三
  • 免费的量化交易股票API有哪些局限性？
  • 人工智能-Python上下文管理器-with
  • Windows系统下Rancher安装全攻略：开启容器管理新征程
  • Oracle Dataguard（主库为 Oracle 11g 单节点）配置详解（2）：配置主数据库
  • MATLAB条件判断(if_else_end型)
  • WPS计算机二级•表格初认识