分页实现

vue实现通用分页控件,支持前端分页、后端分页。 如果是后端做分页的话,就传递count属性值这个属性代表总数据量,需要用来计算总页数如果是前端做分页,就传递itemList属性值,这个属性表示总数据数组,根据这个数组的长度可以计算页数,根据页码可以对数组进行截取并把截取的单页数据通过自定义事件传递给父组件,父组件更新列表数据渲染itemList: {//数据列表},count: {//有值则分页功能后端实现},})通过自定义事件可以把页码或者是分页后的数据传递给父组件。 阅读详情

[1]为什么使用分页?

   A、查询数据量的增多,一页的内容放不下的,所以使用分页

   B、分页查询的是部分数据,这样查询的速度就比较快

 

[2]分页必须知道的参数

    A、分页的SQL语句   select   *  from   student   limit  startIndex,size

    B、获得当前的页数   index ;

          每一页显示的条数   size;

          下一页  index++    上一页 index--

           尾页: index =最大页数?

         最大页数如何计算?

         假设:count=15;  size  =5

           if(count%size==0){

             maxpage =count/size

            }else{

             maxpage =count/size+1

            }

   举例:学生信息分页实现

@WebServlet("/StudentServlet2")
public class StudentServlet2 extends HttpServlet {

    StudentService studentService = new StudentServiceImpl();
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //req.setCharacterEncoding("utf-8");

        //获取前台数据
        //获得查询的条件
        String name = req.getParameter("name");
        String score = req.getParameter("score");

        if(name!=null){
            byte[] bytes = name.getBytes("iso8859-1");
            name = new String(bytes, 0, bytes.length, "utf-8");
        }

        //接收当前的页数
        String index = req.getParameter("index");
        System.out.println(index);
        int i=1;
        if(index!=null && !"".equals(index)){
            i = Integer.parseInt(index);
            System.out.println("index:"+i);
            //pg.setIndex(i);
        }
        PageBean pg = new PageBean();
        pg.setIndex(i);

        //获得当前的size
        String size1 = req.getParameter("size");
        int si=5;
        if(size1!=null &&!"".equals(size1)){
            si=Integer.parseInt(size1);
            //pg.setSize(si);
        }
        pg.setSize(si);
        //获得总条数
        int count = studentService.getCount(name,score);
        pg.setTotalCount(count);
        //int start=pg.getStartRow();

        //System.out.println("start:"+start);
        //数据处理
        //int size = pg.getSize();

        //获得开始下标
        int start = pg.getStartRow();
        //获得每页显示的条数
        int size = pg.getSize();

        List<Student> list = studentService.findMore(start,size,name,score);

        //做出响应
        req.setAttribute("list",list);
        req.setAttribute("pb",pg);
        req.setAttribute("name",name);
        req.setAttribute("score",score);
        req.getRequestDispatcher("/show.jsp").forward(req,resp);
    }

前端实现

<center>
<form action="StudentServlet2" method="get">
    用户名:<input type="text" id="name" name="name" value="${name}"/>
    分数><input type="text" id="score" name="score" value="${score}"/>
    <input type="submit"  value="查询">
    <hr/>
</form>
</center>
    <table border="1px" align="center">
    <tr>
        <td>用户ID</td>
        <td>用户名</td>
        <td>用户分数</td>
        <td>用户年龄</td>
        <td>用户图片</td>
        <td>操作</td>
    </tr>

    <c:forEach items="${list}" var="stu">
    <tr>
        <td>${stu.sid}</td>
        <td>${stu.sname}</td>
        <td>${stu.score}</td>
        <td>${stu.age}</td>
        <td><img src="/student/upload/${stu.filename}" width="80px"></td>
        <td><a href="/student/DownLoadServlet?filename=${stu.filename}&filetype=${stu.filetype}">下载</a></td>
    </tr>
    </c:forEach>
    <tr>
      <th colspan="10">
          <a href="StudentServlet?sign=first">首页</a>
          <a href="StudentServlet?sign=up">上一页</a>
          <a href="StudentServlet?sign=next">下一页</a>
          <a href="StudentServlet?sign=last">尾页</a>
      </th>
    </tr>

    <tr>
      <th colspan="10">
          <a href="javascript:change2(1,${pb.size})">首页</a>
          <c:if test="${pb.index>1}">
              <a href="javascript:change2(${pb.index-1},${pb.size})">上一页</a>
          </c:if>
          <c:forEach items="${pb.numbers}" var="num" >
                <c:if test="${pb.index==num}">
                    [<a href="javascript:change2(${num},${pb.size})">${num}</a>]
                </c:if>

                <c:if test="${pb.index!=num}">
                    <a href="javascript:change2(${num},${pb.size})">${num}</a>
                </c:if>
          </c:forEach>
          <c:if test="${pb.index<pb.totalPageCount}">
              <a href="javascript:change2(${pb.index+1},${pb.size})">下一页</a>
          </c:if>
          <a href="javascript:change2(${pb.totalPageCount},${pb.size})">尾页</a>
          每页显示
          <select onchange="change2(1,this.value)">
              <c:forEach begin="5" end="15" step="5" var="num">
              <option value="${num}" <c:if test="${pb.size==num}">selected</c:if> >${num}</option>
              </c:forEach>
          </select>
          条记录
          总共${pb.totalCount}条记录
      </th>
    </tr>

</table>
<script type="text/javascript">
    /*function change(size) {
        alert(size);
        window.location.href="StudentServlet2?size="+size;

    }*/
    
    function change2(index,size) {
        var name = document.getElementById("name").value;
        var score = document.getElementById("score").value;
        window.location.href="StudentServlet2?index="+index+"&size="+size+"&name="+name+"&score="+score;
    }
</script>

 

Java 分页的实现原理 Java 分页的实现原理主要围绕‌‌和‌‌展开,核心是通过限制每次查询的数据量,提升性能和用户体验。 阅读详情

相关推荐

基于jquery的web分页实现

基于jquery的web分页实现 文章目录基于jquery的web分页实现1.前言2.工具3.写代码之前的思考1.首先一个分页由一下几个部分组成:2.具体分析4.具体操作对<< 和 >> 的控制控制方块数字的变化对数字的变化控制关键步骤触发事件的代码小方块背景颜色的控制页面实现代码(使用jstl动态控制)5.完整js代码6.效果图 1.前言 之前写过一次web分页的实现,但是那次写得不够完美,还有许多需要改进得地方。其次上次写得那个是使用原生js写的,代码量比较多。所以这次选取了j

qq_41743601的博客 989

jsp页面跳转传值

jsp页面,需要实现从URL获得参数,并将该参数在页面跳转的过程中进行参数的传递,实现如下: 首先从URL获得参数: 可以通过request.getParameter(“index”)来获得 但是当想用链接跳转时带上该参数,就会出现各种问题,一开始打算实现方式如下: Hello 结果出错,最后用了一个变量解决了,如下: 在前面嵌入一段代码: &lt;% String index=request....

weixin_43293627的博客 2751

pageHelper分页前端实现

前端框架 jquery+bootstrap+thymeleaf 后端Controller /** * 跳转日志管理页面 * * @param model * @param pageNum 第几页 * @param pageSize 页大小 * @return */ @Log(module = "日志管理", o...

lzh_coder8080的博客 3471

Java Web基础入门第五十讲 学生信息查询之分页练习

在上一篇博客客户关系管理系统之分页查询中,我们就完成了客户信息的分页查询,现在我们趁热打铁来实现学生信息的分页查询,做这个练习来巩固我们的知识。创建MVC架构的Web项目在Eclipse中新创建一个day15_page项目,导入项目所需要的开发包(jar包),创建项目所需要的包,在java开发中,架构的层次是以包的形式体现出来的。 项目所需要的开发包(jar包): 序号 开发包名称

李阿昀的博客 3550

用于多种无人机协作的群体智能算法:综合综述

随着无人机技术的快速高水平发展,将多架无人机作为自主控制的编队应用于复杂情况是一个新兴领域的代表之一。在实现自主控制的挑战中,碰撞避免、任务分配、路径规划和编队重构是关键功能。本文对各种经典的无人机群智能算法进行了系统的总结和分析。

erjia_的博客 1万+

自学篇--使用keil5.23创建一个stm32工程并编译(固件包自带版本)

之前在本科学习阶段学习过一点51单片机的知识,可是因为基本没有实践过几次现在已经完全忘记了。。前几天老师突然丢给我几个板子说让我把程序编译、烧写环境装好,当时我就震惊了,不过经过三四天的自我摸索,之后参考他人的学习经验,现在已经基本能处理这个问题了,所以为了方便后面的学者,主要也是为了把自己这几天的学习成果记录一下,我在这里把这个过程写下来。(因为刚刚接触,很多原理性的东西都还不懂,只是一个操作步

yang_csdnForOBTS的博客 8658

实现分页展示

实现分页展示

qq_60281421的博客 1506

学习海康VisionMaster之顶点检测

2:应用场景:海康VisionMaster的顶点检测功能在工业视觉检测中具有广泛的应用场景,尤其在精密制造、电子元件检测和机械加工等领域,其通过高精度定位物体的关键点(如角点、交点或边缘顶点)来实现自动化测量与质量控制。基本参数这里就是画ROI,设定跟踪参数和之前的工具是一样的方法,这里画的方向需要注意,如下图所示,边缘的扫描方向正好对应需要查找的边缘点。一个不是很规则的物体需要检测一个凸台的顶角坐标,其实靠边缘与边缘交点是不太稳定的,如下图所示,边缘很短,很容易产生误抓边缘。1:什么是顶点检测?

yuhouxiyang的专栏 1520

13. 服务器渲染技术 -JSP

13.1 现状 JSP 使用情况 Thymeleaf 使用情况, 通常和 SpringBoot 结合 Vue 使用情况 13.2 学 JSP 前,解释一下 目前主流的技术是 前后端分离 (比如: Spring Boot + Vue/React), 后面会学习的 JSP 技术使用在逐渐减少,但使用少和没有使用是两个意思,一些老项目和中小公司还在使用 JSP,工作期间,很有可能遇到 JSP 小结:JSP 使用在减少(但是现阶段还是有必要学一下,让我们的技术栈更加全面), 我们最佳技术策

要学就学灰太狼的博客 369

安时积分法和开路电压法结合估算锂电池SOC

基于安时积分法和开路电压法结合的锂电池SOC估计Simulink仿真建模,利用安时积分法计算放电过程中的SOC,在搁置状态利用开路电压法进行SOC修正。

qq_39304296的博客 2552

关于 Python PyQt5 界面运行时提示无法初始化Qt平台的解决方案

关于 Python PyQt5 界面运行时提示无法初始化Qt平台的解决方案

smart_num_1的博客 6883

分页查询的实现

本篇文章主要详细地讲解,在vue项目开发时,如何完成分页查询(包含前、后端)。

casually的博客 1735

T113-S3-官方SDK分区添加

本篇文章将展示如何编译T113-S3的SDK以及在sdk中添加用户自定义分区,让您能够轻松地开始在您的项目中使用T113-S3芯片。T113-S3是一款功能强大的嵌入式处理器,适用于各种应用,包括物联网、工业自动化和智能家居等。T113-S3-SDK是特别为T113-S3芯片设计的软件开发工具包(Software Development Kit)。它包含了一系列用于开发和定制嵌入式应用程序的工具、库和示例代码,方便开发者在T113-S3平台上开展软件开发工作。

flypig has a dream! 2358

分页功能的分析与实现

主要讲解了分页功能的分析与实现。两种实现方式「物理分页」和「逻辑分页」。以及具体讲解了如何在javaWeb项目和使用MyBatis框架的项目的实现。

qq_44985812的博客 1万+

SCI投稿Title Page、Cover letter、Highlights、Manuscript模板

(简要介绍一下论文的创新性). I hope this paper issuitable for “Journal Name”.版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。原文链接:https://blog.youkuaiyun.com/weixin_48615832/article/details/120317336。

qq_15963745的博客 3698

损失函数大汇总(四十五)(clDice Loss附公式推导与代码)

clDice Loss是一种针对细长结构分割任务的拓扑保持损失函数,通过比较预测区域和真实区域的中心线重叠情况来评估分割质量。与传统Dice Loss关注区域重叠不同,clDice Loss重点考察连通性和骨架拓扑结构,能有效避免血管断裂、分支错误连接等问题。该损失函数包含两个核心指标:预测骨架在真实区域中的覆盖比例(Topology Precision)和真实骨架被预测区域覆盖的比例(Topology Sensitivity),通过调和平均得到最终评估值。由于传统骨架提取算法不可导,实际实现采用可微的so

悦学共鸣,温柔以待,汇聚光芒,共同成长 450

数据分页的实现

数据分页的实现 今天在做项目的过程当中遇到了数据分页,说到数据分页,相信都不会陌生,平常百度的时候都会遇到: 这个算是比较经典的,今天特意实现一下数据分页,以下是我的效果图: 可以进行页数搜索,像这样: 外观看起来比较好看,也很好用 话不多说,直接上代码 以下是基本的布局 demo.html <!DOCTYPE html> <html> <hea...

qq_41672008的博客 1576

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

动态实现分页

在开发网站的过程中,做分页处理肯定是常常遇到的。这里介绍一个对整个应用都有效的分页方式。(WAP开发中,用不了JS,显得更有用了) 在JSP页面上,只需在需要显示分页信息的地方加入请求参数(参数值为分页代码)。例如,在引入了struts2标签的页面中加入代码:。       在发送请求的servlet中,只需实例化pageInfo,并设置好需要跳转的url(请求地址名:httpServle

tanwen1234的专栏 2667

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

ET2012新版免狗免安装绿色软件

ET2012新版免狗免安祖昂绿色软件。,新界面,新视觉,

SpringBoot实现分页查询

前言

CoCo629vanilla的博客 1万+

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

Mybatis实现分页功能

分页可分为逻辑分页和物理分页。

weixin_51262054的博客 1万+

分页接口的实现

一、分页接口 Page.java /** * 分页接口 * <p></p> * Created on 2017/10/30. */ public interface Page<T> { /**获取当前页码*/ int getPageNo(); /**获取当前页大小*/ int getPageSize(); /*...

kk的博客 8013

ibatis 分页 实现 (物理分页)

参考http://blog.youkuaiyun.com/zhuangyan2004/archive/2007/02/01/1499915.aspx 加上自己的修改,支持分页查询,返回分页的具体信息,比如页数,当前页,结果集。 我是在SpringMvc+ibatis 实现。 其中加入一个PageInfo类,并修改了其他的4个类。 附源码 package com.littleqworks.co

yc_mark的专栏 1329

ssm实现分页

之前实现分页,都是写好后端就行,今天要自己全面实现一个分页,不知从何下手,也查了很多,但是基本都是说什么重构框架,自己写sql,计算前一页,前端 js 实现之类的,看的是云里雾里,后来也成功实现了分页,在此记录一下,希望能对大家有帮助。 一、maven pom文件中导入依赖(若没有使用响应的maven构建项目,导入相应的jar包即可) <dependency> <gro...

crazy_lala的博客 2612

php分页原理实现,php分页的实现原理

在我们上篇文章中我我们介绍了php实现分页的效果,那么分页实现的原理是什么?今天就带大家来解析一下php分页的原理。分页显示是一种非常常见的浏览和显示大量数据的方法,属于web编程中最常处理的事件之一。对于web编程的老手来说,编写这种代码实在是和呼吸一样自然,但是对于初学者来说,常常对这个问题摸不着头绪,因此特地撰写此文对这个问题进行详细的讲解。一、分页原理:所谓分页显示,也就是将数据库中的结果...

weixin_39897392的博客 741

RowBounds实现分页功能

首先我们了解一下物理分页和逻辑分页物理分页:直接从数据库中拿出我们需要的数据,例如在Mysql中使用limit逻辑分页:从数据库中拿出所有符合要求的数据,然后再从这些数据中拿到我们需要的分页数据优缺点物理分页每次都要访问数据库,逻辑分页只访问一次物理分页占用内存少,逻辑分页相对较多物理分页数据每次都是最新的,逻辑分页有可能滞后我们再来看RowBounds,我们可以通过RowBounds对象来实现逻...

xiao_dondon的博客 4143

php 分页怎么实现的_php如何实现分页

php实现分页的方法:1、通过sql查询进行分页;2、使用ajax的方法实现分页;3、通过“function viewpage(p){...}”方式实现分页。php分页功能的3种实现方法在php项目中,分页是非常常见的,那么php分页功能该如何实现呢?本文将为大家带来的就是php分页功能的3种实现方法,对分页不太熟的同学们有福利了哦!方法一:将sql查询进行分页进行,需要调用几个函数,具体见下方脚...

weixin_32015301的博客 1654
上一篇: 过滤器
下一篇: 文件上传和文件下载的简单应用
塔夫先生
博客等级 码龄8年 11粉丝 63原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值