数据分页模块系列 完美封装PageModel实现分页模块

先说一下框架分页技术,在我们之前那个高校项目中使用DWZ实现的分页用了自定义标签使用起来也比较方便,除了DWZ很多框架已经给我们做好了分页我们需要做的仅仅是把一些分页参数传给我们的框架,俗话说你用别人的东西就得按着别人的来,得按着别人的框架进行布局了、传参了等等,这样灵活性大大降低,况且感觉使用框架频繁的一些软件一般是一些管理类型的,对界面的美观方便需求并不是很高,工整、能用就可以,然而呢,还有些界面需要灵活配置分页按钮、分页条等,这就需要把类似于这样的功能封装起来。

         分页的模块很多人都在写都在用,大体上的思路是一致的也不是什么新的技术,不同的是看谁封装的更灵活对于本系统更好用这是不同的地方。在我们那个基础系统里面长海封装了一个分页,只要在页面上引入一个自定义标签即可,使得开发人员实现这个功能非常的容易。

分页需求:

1.同样一个分页模块如果拿到了别人系统里面是不是可以呢

2.分页样式经常更换(和界面分离,只等着美工画好界面给我就好)

3.接收一个后台查询出来的list对象或数组对象等

         如果想要随意更换分页样式需要引入分页模板,其实就是一个html类型的文件以inc结尾,需要自己提前写好,下面是这个模板代码,利用模板真正做到了后台开发同美工分离,美工如果更换了前台样式后台不用改动一点代码就完成了

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. <span>总课程数:$page.total </span>  
  2.                    <span>总页数:$page.totalPage </span>  
  3.                    <span class="pag_01">当前第<a>$page.currentPageNumber</a></span>  
  4.                    <span class="pag_02"><a href="#" onClick="changePage(1,$page.pageSize)">[首页]</a>  
  5.                  <a href="#" onclick="changePage(${page.previousPageNumber},$page.pageSize)">[上一页]</a>  
  6.                  <a href="#" onclick="changePage(eval($page.nextPageNumber),$page.pageSize)">[下一页]</a>  
  7.                  <a href="#" onclick="changePage($page.totalPage,$page.pageSize)">[尾页]</a></span>  
  8.                    <span id="tail_span">转到<input id="go_page" type="text" class="put_03" /><input value="go" type="button" onclick="jumpPage($page.totalPage,$page.pageSize);"></span>  
PageModel 类的代码

[java]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. package com.zhjy.zydc.web.util;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5. import java.util.Collections;  
  6. import java.io.Serializable;  
  7. import java.io.StringWriter;  
  8. import org.apache.velocity.Template;  
  9. import org.apache.velocity.VelocityContext;  
  10. import org.apache.velocity.context.Context;  
  11. import org.apache.velocity.app.Velocity;   
  12.   
  13. /** 
  14.  * @author lilongsheng 
  15.  * @return 描述显示结果集的页面 
  16.  */  
  17. public class Page implements Serializable {  
  18.       
  19.     //每一页显示几天记录  
  20.     public static final int PAGE_SIZE = 8;  
  21.     public static final int PAGE_SIZE_SMALL = 5;  
  22.     public static final int PAGE_SIZE_NORMAL = 8;  
  23.     public static final int PAGE_SIZE_BIG = 8;  
  24.     public static final int PAGE_SIZE_BIGGER = 20;  
  25.     public static final int PAGE_SIZE_BIGGEST = 50;  
  26.    
  27.       
  28.     public static final int PAGE_NUMBER_FIRST = 1;  
  29.     /** 
  30.      * 空白页面 
  31.      */  
  32.     public static final Page EMPTY_PAGE =  
  33.         new Page(Collections.EMPTY_LIST, 0false);  
  34.   
  35.     /** 
  36.      * 结果集列表 
  37.      */  
  38.     List objects;  
  39.   
  40.     /** 
  41.      * 开始记录号,从0开始 
  42.      */  
  43.     public int start;  
  44.     /** 
  45.      * 结束记录号 
  46.      */  
  47.     public int end;  
  48.     /** 
  49.      * 显示在页面开始记录号,从1开始 
  50.      */  
  51.     public int viewStart;  
  52.     /** 
  53.      * 显示在页面结束记录号 
  54.      */  
  55.     public int viewEnd;  
  56.     /** 
  57.      * 是否有上一页的开关 
  58.      */  
  59.     public boolean hasPrevious;  
  60.     /** 
  61.      * 上一页的页码 
  62.      */  
  63.     public int previousPageNumber;  
  64.     /** 
  65.      * 是否有下一页的开关 
  66.      */  
  67.     public boolean hasNext;  
  68.     /** 
  69.      * 下一页的页码 
  70.      */  
  71.     public int nextPageNumber;  
  72.     /** 
  73.      * 一共有多少行记录 
  74.      */  
  75.     public int total;  
  76.     /** 
  77.      * 一共有多少页 
  78.      */  
  79.     public int totalPage;  
  80.     /** 
  81.      * 当前是第几页 
  82.      */  
  83.     public int currentPageNumber;  
  84.     /** 
  85.      * 每页有多少行 
  86.      */  
  87.     public int pageSize;  
  88.       
  89.       
  90.     /** 
  91.      * 得到分页的起始纪录 
  92.      * @param pageNo 
  93.      * @param max 
  94.      * @return 
  95.      */  
  96.     public static int selectSavNo(int pageNo, int max) {  
  97.         int savNo = 0;  
  98.         savNo = (pageNo - 1) * max;  
  99.         return savNo;  
  100.     }  
  101.   
  102.     /** 
  103.      * 构造器,创建一个页面,不分页 
  104.      * @param: objects 结果集 
  105.      */  
  106.     public Page(List objects) {  
  107.         this.objects = new ArrayList(objects);  
  108.         this.currentPageNumber = 1;  
  109.         this.pageSize = objects.size();  
  110.         this.total = objects.size();  
  111.         if (total == 0)  
  112.             this.currentPageNumber = 0;  
  113.         else  
  114.             autoCalculate();  
  115.     }  
  116.       
  117.     /** 
  118.      * 构造器,创建页面 
  119.      * @param: objects 结果集 
  120.      * @param: s 开始记录号,从0开始 
  121.      * @param: hasNext 是否有下一页的开关 
  122.      */  
  123.     public Page(List objects, int s, boolean hasNext) {  
  124.         this(objects,s,hasNext,0);  
  125.     }  
  126.   
  127.     /** 
  128.      * 构造器,创建页面 
  129.      * @param: objects 结果集 
  130.      * @param: s 开始记录号,从0开始 
  131.      * @param: hasNext 是否有下一页的开关 
  132.      * @param: total 一共有多少行记录 
  133.      */  
  134.     public Page(List objects, int s, boolean hasNext, int total) {  
  135.         this(objects,s,PAGE_SIZE,hasNext,total);  
  136.     }  
  137.   
  138.     /** 
  139.      * 构造器,创建页面 
  140.      * @param: l 结果集 
  141.      * @param: s 开始记录号,从0开始 
  142.      * @param: size 每页有多少行 
  143.      * @param: hasNext 是否有下一页的开关 
  144.      * @param: total 一共有多少行记录 
  145.      */  
  146.     public Page(List objects, int s, int size, boolean hasNext, int total) {  
  147.         this.objects = new ArrayList(objects);  
  148.           
  149.         this.currentPageNumber = s / size + 1;  
  150.         this.pageSize = size;  
  151.         this.total = total;  
  152.         System.out.println("查询出的总记录数是:"+total);  
  153.         if (total == 0)  
  154.         {     
  155.             System.out.println("查询出的总记录数是否为等于 0:"+total);  
  156.             this.currentPageNumber = 0;  
  157.         }else  
  158.         {  
  159.             System.out.println("是否执行了判断上一页、下一页:");  
  160.             autoCalculate();  
  161.         }  
  162.     }  
  163.   
  164.     /** 
  165.      * 构造器,创建页面 
  166.      * @param: objects 结果集 
  167.      * @param: currentPageNumber 当前是第几页 
  168.      * @param: pageSize 每页有多少行 
  169.      * @param: total 一共有多少行记录 
  170.      */  
  171.     public Page(List objects, int currentPageNumber, int pageSize, int total) {  
  172.         this.objects = objects;  
  173.         this.currentPageNumber = currentPageNumber;  
  174.         this.pageSize = pageSize;  
  175.         this.total = total;  
  176.           
  177.         if (total == 0)  
  178.         {  
  179.             this.currentPageNumber = 0;  
  180.           
  181.         }else  
  182.         {  
  183.             autoCalculate();  
  184.               
  185.         }     
  186.     }  
  187.   
  188.     /** 
  189.      * @author lls 
  190.      * @return 计算当前页号 
  191.      *  
  192.      */  
  193.     private void autoCalculate() {  
  194.           
  195.         start = (currentPageNumber - 1) * pageSize;  
  196.         if(pageSize>this.objects .size()){  
  197.             end = this.objects .size()-1;  
  198.         }else{  
  199.             end = start + pageSize-1;  
  200.         }  
  201.         if (end >= total) {  
  202.             end = total - 1;  
  203.         }  
  204.         //显示在页面开始记录号,从1开始  
  205.         viewStart = start + 1;  
  206.         //显示在页面结束记录号  
  207.         viewEnd = end + 1;  
  208.         totalPage = (total + pageSize - 1) / pageSize;  
  209.           
  210.         //如果当前页小于等于1  
  211.         if (currentPageNumber <= 1) {  
  212.             //不能再上一页,并设置当前页为1  
  213.             hasPrevious = false;  
  214.             currentPageNumber = 1;  
  215.         } else if(hasPrevious) {  
  216.             //当前页号减一  
  217.             currentPageNumber = currentPageNumber - 1;  
  218.         }  
  219.         //如果当前页号大于等于总页数  
  220.         if (currentPageNumber >= totalPage) {  
  221.             //设置下一页不可用  
  222.             hasNext = false;  
  223.               
  224.             System.out.println(currentPageNumber);  
  225.             currentPageNumber = totalPage;  
  226.             System.out.println(currentPageNumber);  
  227.           
  228.         } else if(hasNext){  
  229.             //当前页号加一  
  230.             currentPageNumber = currentPageNumber + 1;  
  231.         }  
  232.     }  
  233.   
  234.     /** 
  235.      * 获得结果集 
  236.      * @return: List 结果集 
  237.      */  
  238.     public List getList() {  
  239.         return this.objects;  
  240.     }  
  241.   
  242.   
  243.     /** 
  244.      * 获得显示在页面的开始记录号,从1开始 
  245.      * @return: int 显示在页面的开始记录号 
  246.      */  
  247.     public int getViewStart() {  
  248.         return viewStart;  
  249.     }  
  250.     /** 
  251.      * 获得显示在页面的结束记录号 
  252.      * @return: int 显示在页面的结束记录号 
  253.      */  
  254.     public int getViewEnd() {  
  255.         return viewEnd;  
  256.     }  
  257.     /** 
  258.      * 是否有下一页 
  259.      * @return: boolean 是否有下一页的开关 
  260.      */  
  261.     public boolean hasNextPage() {  
  262.         return hasNext;  
  263.     }  
  264.     /** 
  265.      * 是否有上一页 
  266.      * @return: boolean 是否有上一页的开关 
  267.      */  
  268.     public boolean hasPreviousPage() {  
  269.         return hasPrevious;  
  270.     }  
  271.     /** 
  272.      * 获得上一页的页码 
  273.      * @return: int 上一页的页码 
  274.      */  
  275.     public int getPreviousPageNumber() {  
  276.         return previousPageNumber;  
  277.     }  
  278.     /** 
  279.      * 获得下一页的页码 
  280.      * @return: int 下一页的页码 
  281.      */  
  282.     public int getNextPageNumber() {  
  283.         return nextPageNumber;  
  284.     }  
  285.     /** 
  286.      * 获得结果集中记录总行数 
  287.      * @return: int 一共有多少行记录 
  288.      */  
  289.     public int getTotal() {  
  290.         return total;  
  291.     }  
  292.     /** 
  293.      * 获得总页数 
  294.      * @return: int 一共有多少页 
  295.      */  
  296.     public int getTotalPage() {  
  297.         return totalPage;  
  298.     }  
  299.     /** 
  300.      * 获得当前页码 
  301.      * @return: int 当前页码 
  302.      */  
  303.     public int getCurrentPageNumber() {  
  304.         return currentPageNumber;  
  305.     }  
  306.     /** 
  307.      * 获得每页多少行记录 
  308.      * @return: int 页大小 
  309.      */  
  310.     public int getPageSize() {  
  311.         return pageSize;  
  312.     }  
  313.     /** 
  314.      * 获得下一页在结果集中开始的记录号,从0开始 
  315.      * @return: int 下一页在结果集中开始的记录号 
  316.      */  
  317.     public int getStartOfNextPage() {  
  318.         return start + PAGE_SIZE;  
  319.     }  
  320.     /** 
  321.      * 获得上一页在结果集中开始的记录号,从0开始 
  322.      * @return: int 下一页在结果集中开始的记录号 
  323.      */  
  324.     public int getStartOfPreviousPage() {  
  325.         return Math.max(start - PAGE_SIZE, 0);  
  326.     }  
  327.   
  328.     /** 
  329.      * 根据页号和记录数得到起始记录 
  330.      * @param pageNo 
  331.      * @param pageSize 
  332.      * @return 
  333.      */  
  334.     public static int getStartNumber(int pageNo, int pageSize) {  
  335.         int startNumber = 0;  
  336.         startNumber = (pageNo - 1) * pageSize;  
  337.         return startNumber;  
  338.     }  
  339.   
  340.     /** 
  341.      * hidden条件 
  342.      * @param result 
  343.      */  
  344.     private void getHiddenInfo(StringBuffer result){  
  345.         result.append("<input type=\"hidden\" name=\"pageNumber\">");  
  346.         result.append("<input type=\"hidden\" name=\"pageSize\">");  
  347.           
  348.           
  349.     }  
  350.     /** 
  351.      * @tuthod :lilongsheng 
  352.      * @param  StringBuffer 
  353.      * @result js字符串 
  354.      */  
  355.     private void  getJavaScript(StringBuffer result){  
  356.           
  357.         //js代码开始标记    
  358.        result.append("<SCRIPT LANGUAGE=\"JavaScript\">");  
  359.        //上一页、下一页等按钮的点击事件,该事件同模板中的对应  
  360.        result.append(" function changePage(pageNumber,pageSize)")  
  361.                     .append("{")  
  362.                     .append(" document.forms[0].pageNumber.value = pageNumber;")  
  363.                     .append(" document.forms[0].pageSize.value = pageSize;")  
  364.                     .append(" document.forms[0].submit(); ")  
  365.                     .append("}");  
  366.        //跳转按钮的点击事件  
  367.        result.append(" function jumpPage(totalPage,pageSize)")  
  368.                 .append("{")  
  369.                 .append(" var pageNumber = parseFloat(document.getElementById(\"go_page\").value);")  
  370.                 .append(" if (pageNumber > totalPage){")  
  371.                 .append(" pageNumber = totalPage;}")  
  372.                 .append(" if (pageNumber < 1){")  
  373.                 .append(" pageNumber = 1;}")  
  374.                 .append(" document.forms[0].pageNumber.value = pageNumber;")  
  375.                 .append(" document.forms[0].pageSize.value = pageSize;")  
  376.                 .append(" document.forms[0].submit();")  
  377.                 .append("}");  
  378.        //js代码结尾标记  
  379.         result.append("</SCRIPT>");  
  380.     }  
  381.   
  382.   
  383.     /** 
  384.      * @parameter 按钮模板的名称 
  385.      * @return    页面跳转按钮和相应的按钮的的js事件 
  386.      */  
  387.     public String getPageBar_(String t_name)throws Exception{  
  388.         //存储字符串  
  389.         StringBuffer result = new StringBuffer();  
  390.           
  391.         //网页面上加载js代码,分为对应上一页、下一页等按钮的点击事件  
  392.         getJavaScript(result);  
  393.         //hidden  
  394.         getHiddenInfo(result);  
  395.         //分页按钮“上一页”“下一页”等从模板中加载  
  396.         Template template = Velocity.getTemplate("WEB-INF/classes/"+t_name,"utf-8");  
  397.         Context context = new VelocityContext();  
  398.         context.put("page"this);  
  399.         StringWriter writer =new StringWriter();  
  400.         template.merge(context,writer);  
  401.         writer.flush();  
  402.         result.append(writer.toString());  
  403.         return result.toString();  
  404.     }  
  405. }  
              该分页类中有个getPageBar_(string t_name)方法,这个方法完成了动态加载分页模板并打印到页面上,用着很方便,一些按钮的单击等事件也是通过pagemodel类写到页面上,可以说界面上只需要引入一个pageModel即可完成分页所有的功能,其余的代码一点不用写了,大大提高了开发效率。


              工作感悟:

               工作时对某些知识理解的要深刻、理解的到位一些,毕竟给你一个东西如果你理解是模棱两可的,那你就不能写出东西来不知道除了错误不知道怎么去改正,工作中学习的新知识相比在学校的确很少,很很多事情需要做拿不出几天时间来专门学习什么,如果想学习也只能晚上下班后利用自己的时间扩展学习一下,也感觉自己需要学习的东西还很多,正在学习中……


喜欢我的文章的,可以关注信微公众号“测试项目开发”,需要什么内容可以在里面提,我看到后会给大家解答


  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Django 中实现前后端分离的分页功能模块可以通过以下步骤进行: 1. 后端实现: - 创建一个 Django 视图函数,用于处理分页请求。可以使用 Django 的内置分页器类 `Paginator` 来实现分页功能。 - 在视图函数中,获取前端传递过来的当前页码和每页显示的数量。可以通过 `request.GET` 获取 GET 请求中的参数。 - 使用 `Paginator` 类对数据进行分页,并获取当前页的数据。 - 将分页结果和当前页码等信息封装成 JSON 格式返回给前端。 2. 前端实现: - 在前端页面中,通过 AJAX 或者其他方式发送分页请求到后端视图函数。 - 在接收到后端返回的 JSON 数据后,解析数据并渲染到页面上,显示分页结果。 - 创建前端的分页组件,包括上一页、下一页、跳转等功能,以便用户进行翻页操作。 下面是一个简单的示例代码: 后端实现(views.py): ```python from django.core.paginator import Paginator from django.http import JsonResponse def get_paginated_data(request): data = ['item1', 'item2', 'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10'] paginator = Paginator(data, 3) # 每页显示3条数据 page_number = request.GET.get('page') # 获取当前页码,默认为1 page_obj = paginator.get_page(page_number) current_page = page_obj.number total_pages = paginator.num_pages items = page_obj.object_list response_data = { 'current_page': current_page, 'total_pages': total_pages, 'items': items, } return JsonResponse(response_data) ``` 前端实现(JavaScript): ```javascript function getPaginatedData(page) { $.ajax({ url: '/get_paginated_data/', type: 'GET', data: {page: page}, success: function (response) { // 解析后端返回的 JSON 数据 var current_page = response.current_page; var total_pages = response.total_pages; var items = response.items; // 渲染数据到页面上 // ... }, error: function (xhr, status, error) { console.log(error); } }); } // 页面加载完成后,获取第一页的数据 $(document).ready(function () { getPaginatedData(1); }); // 翻页按钮点击事件 $('.pagination-button').click(function () { var page = $(this).data('page'); getPaginatedData(page); }); ``` 以上代码仅为示例,具体的实现方式可能因项目需求而有所不同。你可以根据实际情况进行调整和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值