通用分页详解（前端）

已于 2023-06-30 16:51:06 修改
阅读量6.3k 收藏 20
点赞数 1
文章标签： 前端
于 2023-06-29 12:48:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74915426/article/details/131453100
版权

目录

一.分析

1.1.了解它的思路

1.2.了解它的概念 

 1.3.了解它的好处

二.优化pagebean

 三.制定分页自定义jsp标签

3.1 创建PageTag类

3.2 创建配置文件（tld）文件

3.3BookList

3.4BookServlet

3.5过滤器

 

最后通过分页的详解（前端）就到这里，祝大家在敲代码的路上一路通畅!

感谢大家的观看 !！！！！！

一.分析

1.1.了解它的思路

在前端开发中，分页功能是一个常见的需求。它允许用户通过页面切换来浏览和导航大量数据，提供更好的用户体验。下面是一个通用的分页详解前端思路：

  1. 获取数据：首先，你需要通过接口或其他途径获取到需要分页展示的数据。可以使用Ajax或其他数据获取方式来异步请求数据。

  2. 数据处理：获取到数据后，你需要对数据进行处理，以便在前端进行分页。根据你的需求，你可以对数据进行排序、筛选等操作。

  3. 分页计算：根据每页显示的数据量和总数据量，计算出总页数。一般情况下，你可以使用以下公式来计算总页数：
    totalPages = Math.ceil(totalCount / pageSize)

  4. 分页显示：在页面上展示分页导航栏和数据列表。可以使用HTML和CSS来构建分页导航栏，通常包括上一页、下一页、首页和尾页等按钮。

  5. 分页逻辑：实现分页按钮的点击事件和相应的逻辑。当用户点击上一页或下一页按钮时，根据当前页数和总页数来计算并显示对应的数据。

  6. 数据渲染：根据当前页数和每页显示的数据量，从总数据中截取当前页需要展示的数据，并将其渲染到页面上。

  7. 可选功能：根据实际需求，你可以添加一些额外的功能，比如跳转到指定页、显示当前页数等。

需要注意的是，上述思路提供了一个通用的分页实现思路，具体的实现方式还取决于你使用的前端框架或库。不同的框架或库可能有自己的分页组件或方法，可以根据具体情况来选择使用。

1.2.了解它的概念 

在前端开发中，通用分页是一种常见的功能，能够将大量数据分成多个页面进行展示，提供更好的用户体验。以下是一些与通用分页相关的前端理论概念：

  1. 数据源（Data Source）：指提供分页数据的来源，可以是后端接口返回的数据，也可以是本地数据、缓存数据等。数据源是整个分页功能的基础。

  2. 总记录数（Total Count）：表示数据源中的总记录数，也就是分页数据的总数量。总记录数用于计算总页数，同时在分页导航栏中展示给用户。

  3. 当前页数（Current Page）：表示当前展示的页数，用户可以通过切换当前页数来查看不同的数据页。当前页数通常从1开始，直到总页数。

  4. 总页数（Total Pages）：根据总记录数和每页显示的记录数计算得出的总页数。总页数用于确定分页导航栏中的页码数量，以及判断是否需要显示上一页和下一页按钮。

  5. 每页记录数（Page Size）：指定每页需要展示的记录数量。通过设定每页记录数，可以控制每个分页页面所展示的数据数量。

  6. 分页导航栏（Pagination Navigation）：通常以一组链接或按钮的形式展示在页面上，用于帮助用户导航到不同的数据页。分页导航栏可以包括上一页、下一页、首页、尾页等操作按钮，以及显示当前页码和总页数的信息。

  7. 分页逻辑（Pagination Logic）：根据用户的操作，比如点击上一页、下一页按钮，计算出对应的页码，从数据源中获取相应的数据，并进行渲染展示的逻辑。

  8. 数据渲染（Data Rendering）：在前端页面中将获取到的分页数据进行展示的过程。可以使用HTML、CSS等技术来构建数据展示的模板，并将分页数据填充到模板中。

以上概念是实现通用分页功能时常用的理论基础，了解这些概念可以帮助你更好地理解和实现前端分页功能。具体的实现方式会根据使用的前端框架或库而有所不同。

 1.3.了解它的好处

通用分页在前端开发中有很多好处，以下是一些主要的好处：

  1. 提供更好的用户体验：通用分页功能能够将大量数据进行分页展示，用户可以更方便地浏览和导航数据，提升用户的使用体验。

  2. 加快页面加载速度：当数据量较大时，将所有数据一次性加载到前端页面可能导致页面加载缓慢甚至崩溃。而通过分页加载数据，可以减少每次加载的数据量，提升页面加载速度。

  3. 节省网络带宽：分页加载数据可以降低网络传输的数据量，减少对网络带宽的消耗，特别是在移动端网络环境不稳定的情况下尤为重要。

  4. 简化数据处理逻辑：通过分页展示数据，可以将复杂的数据操作逻辑分散到各个分页中，使前端代码更加清晰和易于维护。

  5. 提高系统性能：将数据分页展示可以减轻后端服务器的负担，降低数据查询和传输的压力，从而提高系统的性能和响应速度。

  6. 可定制化和灵活性：通用分页功能通常具有可定制化的特点，可以根据实际需求调整每页显示的数据量、分页导航栏的样式和布局等，以适应不同项目的要求。

总而言之，通用分页功能能够提升用户体验、减少数据传输负担、提高系统性能，是一项在前端开发中非常有用的功能。通过合理地使用分页功能，可以更好地管理和展示大量数据，提升用户对应用程序的满意度。

二.优化pagebean

优化PageBean主要有以下几个原因：

  1. 提高性能：当数据量较大时，PageBean对象可能包含大量的数据，而在某些场景中，并不需要将所有数据都加载到PageBean中。通过优化PageBean，可以减少内存占用和数据加载的时间，从而提高系统性能。

  2. 减少网络传输：从后端获取PageBean对象需要进行网络传输，而网络传输是相对较慢的操作。通过优化PageBean，可以减少传输的数据量，降低带宽占用，缩短数据传输时间。

  3. 精简数据结构：有时候PageBean可能包含了一些不必要的字段或冗余数据，这些字段可能对前端展示或业务逻辑没有实际的用途。通过优化PageBean，可以精简数据结构，只保留需要的字段，提高代码的可读性和可维护性。

  4. 提高代码可重用性：如果PageBean的设计合理，可以使其在不同的场景中被多次复用。通过优化PageBean，可以增加其可重用性，减少重复代码的编写，提高开发效率。

  5. 增加扩展性：通过优化PageBean，可以考虑增加一些扩展字段或方法，以便应对未来可能的需求变更或功能扩展。这样可以降低后续的开发和维护成本。

  6. 精确控制数据加载：通过优化PageBean，可以实现精确的数据加载策略，例如按需加载、懒加载等。这样可以避免一次性加载过多数据导致性能下降或卡顿的问题。

总之，优化PageBean可以提高系统的性能和可维护性，减少网络传输和内存占用，同时提供更灵活和精确的数据加载策略。通过合理的设计和优化，可以使PageBean更加适应实际的业务需求和开发场景。

优化之前代码如下：

package com.junlinyi.util;
 
/**
 * 分页工具类
 *
 */
public class PageBean {
 
	private int page = 1;// 页码
 
	private int rows = 10;// 页大小
 
	private int total = 0;// 总记录数
 
	private boolean pagination = true;// 是否分页
 
	public PageBean() {
		super();
	}
 
	public int getPage() {
		return page;
	}
 
	public void setPage(int page) {
		this.page = page;
	}
 
	public int getRows() {
		return rows;
	}
 
	public void setRows(int rows) {
		this.rows = rows;
	}
 
	public int getTotal() {
		return total;
	}
 
	public void setTotal(int total) {
		this.total = total;
	}
 
	public void setTotal(String total) {
		this.total = Integer.parseInt(total);
	}
 
	public boolean isPagination() {
		return pagination;
	}
 
	public void setPagination(boolean pagination) {
		this.pagination = pagination;
	}
 
	/**
	 * 获得起始记录的下标
	 * 
	 * @return
	 */
	public int getStartIndex() {
		return (this.page - 1) * this.rows;
	}
 
	@Override
	public String toString() {
		return "PageBean [page=" + page + ", rows=" + rows + ", total=" + total + ", pagination=" + pagination + "]";
	}
 
}

优化之后代码如下：

package com.junlinyi.utils;

import java.util.HashMap;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;

/**
 * 分页工具类
 *增加一个属性url,保留上一次发送的请求地址
	 * 	增加一个属性paramMap,保留上一次发送的请求携带的参数
	 * 			req.getParameterMap();
	 * 增加一个最大页的方法
	 * 增加一个下一页的方法
	 * 增加一个上一页的方法
	 * 初始化pegebean的方法
 */
public class PageBean {

	private int page = 1;// 页码

	private int rows = 10;// 页大小

	private int total = 0;// 总记录数

	// 上一次查询的url
	private String url;
	// 上一次查询所携带的查询条件
	private Map<String, String[]> parameterMap = new HashMap<String, String[]>();

	// 对pagebean进行初始化
	public void setRequest(HttpServletRequest req) {
		// 初始化jsp页面传递过来的当前页
		this.setPage(req.getParameter("page"));
		// 初始化jsp页面传递过来的页大小
		this.setRows(req.getParameter("rows"));
		// 初始化jsp页面传递过来是否分页
		this.setPagination(req.getParameter("pagination"));
		// 保留上一次的查询请求
		this.setUrl(req.getRequestURL().toString());
		// 保留上一次的查询条件
		this.setParameterMap(req.getParameterMap());
	}

	public String getUrl() {
		return url;
	}

	public void setUrl(String url) {
		this.url = url;
	}

	public Map<String, String[]> getParameterMap() {
		return parameterMap;
	}

	public void setParameterMap(Map<String, String[]> parameterMap) {
		this.parameterMap = parameterMap;
	}

	private void setPagination(String pagination) {
		// 只有填写了false字符串，才代表不分页
		this.setPagination(!"false".equals(pagination));
	}

	private void setRows(String rows) {
		if (StringUtils.isNotBlank(rows))
			this.setRows(Integer.valueOf(rows));
	}

	private void setPage(String page) {
		if (StringUtils.isNotBlank(page))
			this.setPage(Integer.valueOf(page));
	}

	private boolean pagination = true;// 是否分页

	public PageBean() {
		super();
	}

	public int getPage() {
		return page;
	}

	public void setPage(int page) {
		this.page = page;
	}

	public int getRows() {
		return rows;
	}

	public void setRows(int rows) {
		this.rows = rows;
	}

	public int getTotal() {
		return total;
	}

	public void setTotal(int total) {
		this.total = total;
	}

	public void setTotal(String total) {
		this.total = Integer.parseInt(total);
	}

	public boolean isPagination() {
		return pagination;
	}

	public void setPagination(boolean pagination) {
		this.pagination = pagination;
	}

	/**
	 * 获得起始记录的下标
	 * 
	 * @return
	 */
	public int getStartIndex() {
		return (this.page - 1) * this.rows;
	}

	@Override
	public String toString() {
		return "PageBean [page=" + page + ", rows=" + rows + ", total=" + total + ", pagination=" + pagination + "]";
	}

	// 上一页
	public int getPrevPage() {
		return this.page > 1 ? this.page - 1 : this.page;
	}

	// 下一页
	public int getNextPage() {
		return this.page < this.getMaxPage() ? this.page + 1 : this.page;
	}

	// 最大页
	public int getMaxPage() {
		return this.total % this.rows == 0 ? this.total / this.rows : (this.total / this.rows) + 1;
	}

}

 三.制定分页自定义jsp标签

3.1 创建PageTag类

package com.junlinyi.tag;

import java.io.IOException;
import java.util.Map;
import java.util.Set;

import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.BodyTagSupport;

import com.junlinyi.utils.PageBean;

/**
 * @author 君临沂
 * 
 */
public class PageTage extends BodyTagSupport {
    private PageBean pageBean;



    public PageBean getPageBean() {
        return pageBean;
    }

    public void setPageBean(PageBean pageBean) {
        this.pageBean = pageBean;
    }

    @Override
    public int doStartTag() throws JspException {
        JspWriter out = pageContext.getOut();
        try {
            out.print(toHTML());
        } catch (IOException e) {
            e.printStackTrace();
        }
        return SKIP_BODY;
    }

    private String toHTML() {
        StringBuilder sb = new StringBuilder();

//        这里拼接的是一个上一次发送的请求以及携带的参数，唯一改变的就是页码
        sb.append("<form id='pageBeanForm' action='"+pageBean.getUrl()+"' method='post'>");
        sb.append("<input type='hidden' name='methodName' value='list'>");
        sb.append("<input type='hidden' name='page'>");
//        重要设置拼接操作，将上一次请求参数携带到下一次
        Map<String, String[]> paMap = pageBean.getParameterMap();
        if(paMap !=null && paMap.size()>0){
            Set<Map.Entry<String, String[]>> entrySet = paMap.entrySet();
            for (Map.Entry<String, String[]> entry : entrySet) {
                for (String val : entry.getValue()) {
                    if(!"page".equals(entry.getKey())){
                        sb.append("<input type='hidden' name='"+entry.getKey()+"' value='"+val+"'>");
                    }
                }
            }
        }
        sb.append("</form>");


        int page = pageBean.getPage();
        int max = pageBean.getMaxPage();
        int before = page > 4 ? 4 : page-1;
        int after = 10 - 1 - before;
        after = page+after > max ? max-page : after;
//        disabled
        boolean startFlag = page == 1;
        boolean endFlag = max == page;

//        拼接分页条
        sb.append("<ul class='pagination'>");
        sb.append("<li class='page-item "+(startFlag ? "disabled" : "")+"'><a class='page-link' href='javascript:gotoPage(1)'>首页</a></li>");
        sb.append("<li class='page-item "+(startFlag ? "disabled" : "")+"'><a class='page-link' href='javascript:gotoPage("+pageBean.getPrevPage()+")'>&lt;</a></li>");

//        代表了当前页的前4页
        for (int i = before; i > 0 ; i--) {
            sb.append("<li class='page-item'><a class='page-link' href='javascript:gotoPage("+(page-i)+")'>"+(page-i)+"</a></li>");
        }

        sb.append("<li class='page-item active'><a class='page-link' href='javascript:gotoPage("+pageBean.getPage()+")'>"+pageBean.getPage()+"</a></li>");

//        代表了当前页的后5页
        for (int i = 1; i <= after; i++) {
            sb.append("<li class='page-item'><a class='page-link' href='javascript:gotoPage("+(page+i)+")'>"+(page+i)+"</a></li>");
        }

        sb.append("<li class='page-item "+(endFlag ? "disabled" : "")+"'><a class='page-link' href='javascript:gotoPage("+pageBean.getNextPage()+")'>&gt;</a></li>");
        sb.append("<li class='page-item "+(endFlag ? "disabled" : "")+"'><a class='page-link' href='javascript:gotoPage("+pageBean.getMaxPage()+")'>尾页</a></li>");
        sb.append("<li class='page-item go-input'><b>到第</b><input class='page-link' type='text' id='skipPage' name='' /><b>页</b></li>");
        sb.append("<li class='page-item go'><a class='page-link' href='javascript:skipPage()'>确定</a></li>");
        sb.append("<li class='page-item'><b>共"+pageBean.getTotal()+"条</b></li>");
        sb.append("</ul>");

//        拼接分页的js代码
        sb.append("<script type='text/javascript'>");
        sb.append("function gotoPage(page) {");
        sb.append("document.getElementById('pageBeanForm').page.value = page;");
        sb.append("document.getElementById('pageBeanForm').submit();");
        sb.append("}");
        sb.append("function skipPage() {");
        sb.append("var page = document.getElementById('skipPage').value;");
        sb.append("if (!page || isNaN(page) || parseInt(page) < 1 || parseInt(page) > "+max+") {");
        sb.append("alert('请输入1~N的数字');");
        sb.append("return;");
        sb.append("}");
        sb.append("gotoPage(page);");
        sb.append("}");
        sb.append("</script>");

        return sb.toString();
    }
}

3.2 创建配置文件（tld）文件

<!DOCTYPE taglib
  PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.2//EN"
   "http://java.sun.com/dtd/web-jsptaglibrary_1_2.dtd">
<!-- 标签库描述符 -->
<taglib xmlns="http://java.sun.com/JSP/TagLibraryDescriptor">
	<tlib-version>1.0</tlib-version>
	<jsp-version>1.2</jsp-version>
	<short-name>Simple Tags</short-name>
	<uri>http://www/JunLinYi/com</uri>	
   
	<tag>
        <name>page</name>
        <tag-class>com.junlinyi.tag.PageTage</tag-class>
        <body-content>JSP</body-content>
        <attribute>
            <name>pageBean</name>
            <required>true</required>
            <rtexprvalue>true</rtexprvalue>
        </attribute>
    </tag>
	
</taglib>

3.3BookList

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www/JunLinYi/com" prefix="z"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link
	href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css"
	rel="stylesheet">
<script
	src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.js"></script>
<title>书籍列表</title>
<style type="text/css">
.page-item input {
	padding: 0;
	width: 40px;
	height: 100%;
	text-align: center;
	margin: 0 6px;
}

.page-item input, .page-item b {
	line-height: 38px;
	float: left;
	font-weight: 400;
}

.page-item.go-input {
	margin: 0 10px;
}
</style>
</head>
<body>
	${pageBean }
	<form class="form-inline"
		action="${pageContext.request.contextPath }/book.action" method="post">
		<div class="form-group mb-2">
			<input type="text" class="form-control-plaintext" name="bname"
				placeholder="请输入书籍名称">
		</div>
		<button type="submit" class="btn btn-primary mb-2">查询</button>
	</form>

	<table class="table table-striped bg-success">
		<thead>
			<tr>
				<th scope="col">书籍ID</th>
				<th scope="col">书籍名</th>
				<th scope="col">价格</th>
			</tr>
		</thead>
		<tbody>
		<c:forEach items="${book }" var="b">
			<tr>
				<td>${b.bid }</td>
				<td>${b.bname }</td>
				<td>${b.price }</td>
			</tr>
		</c:forEach>
		</tbody>
	</table>

	<z:page pageBean="${pageBean }"></z:page>


</body>
</html>

3.4BookServlet

package com.junlinyi.servlet;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.junlinyi.dao.BookDao;
import com.junlinyi.entity.Book;
import com.junlinyi.utils.PageBean;
/**
 * 
 * @author： 君临沂
 *
 */

@WebServlet("/book.action")
public class BookServlet extends HttpServlet {
		@Override
		protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
			this.doPost(req, resp);
		}
		
		@SuppressWarnings("unused")
		@Override
		protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//			String bname = req.getParameter("bname");
				map包含了浏览器传递到后台的所有参数键值对
//				Map<String, String[]> map = req.getParameterMap();
				浏览器请求的地址
//				String url = req.getRequestURL().toString();
			
			PageBean pb=new PageBean();
			pb.setRequest(req);
			BookDao bd=new BookDao();
			Book bk=new Book();
			bk.setBname(req.getParameter("bname"));
			 try {
				List<Book> book = bd.list2(bk, pb);
				req.setAttribute("book",book);
			} catch (Exception e) {
				e.printStackTrace();
			}
			
			req.setAttribute("pageBean",pb);
			req.getRequestDispatcher("bookList.jsp").forward(req, resp);
		}
}

3.5过滤器

在进行页面输出或搜索书籍的时候，我们会发现可能出现乱码问题，这时候我们只需要加上一个过滤器就行了

package com.junlinyi.utils;

import java.io.IOException;
import java.util.Iterator;
import java.util.Map;
import java.util.Set;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 过滤器
 * 中文乱码处理
 * 
 */
@WebFilter("*.action")
public class EncodingFiter implements Filter {

	private String encoding = "UTF-8";// 默认字符集

	public EncodingFiter() {
		super();
	}

	public void destroy() {
	}

	public void doFilter(ServletRequest request, ServletResponse response,
			FilterChain chain) throws IOException, ServletException {
		HttpServletRequest req = (HttpServletRequest) request;
		HttpServletResponse res = (HttpServletResponse) response;

		// 中文处理必须放到 chain.doFilter(request, response)方法前面
		res.setContentType("text/html;charset=" + this.encoding);
		if (req.getMethod().equalsIgnoreCase("post")) {
			req.setCharacterEncoding(this.encoding);
		} else {
			Map map = req.getParameterMap();// 保存所有参数名=参数值(数组)的Map集合
			Set set = map.keySet();// 取出所有参数名
			Iterator it = set.iterator();
			while (it.hasNext()) {
				String name = (String) it.next();
				String[] values = (String[]) map.get(name);// 取出参数值[注：参数值为一个数组]
				for (int i = 0; i < values.length; i++) {
					values[i] = new String(values[i].getBytes("ISO-8859-1"),
							this.encoding);
				}
			}
		}

		chain.doFilter(request, response);
	}

	public void init(FilterConfig filterConfig) throws ServletException {
		String s = filterConfig.getInitParameter("encoding");// 读取web.xml文件中配置的字符集
		if (null != s && !s.trim().equals("")) {
			this.encoding = s.trim();
		}
	}

}

展示图 ：

最后通过分页的详解（前端）就到这里，祝大家在敲代码的路上一路通畅!

感谢大家的观看 !！！！！！

 

✘君临沂
关注
通用查询、分页详解
隔壁的博客
08-27 365
J2EE 一、思维导图 二、后端 1、首先介绍一些助手类 DBHelper—数据库帮助类 package com.util.zwf; import java.io.InputStream; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; import.
通用分页详细讲解（后端）
TestXzing的博客
06-27 815
详细介绍了通用分页的使用案例以及Junit单元测试
前端实现分页
sunnyboysix的博客
08-11 194
data() { return { paginationData: [], tableData: [], currentPage: 1, pageSize: 3, total: 0, } }, dealList() { this.paginationData = [] // 分页数组 tableData 所有的数据 for (let j = this.pageSize * (this.cur.
Vue第 32 篇，前端分页技术解析：Vue + Element UI 实现高效数据展示（vue前端分页，el分页，el-pagination分页，Element分页）
weixin_65793170的博客
02-23 1073
⭐在现代Web应用中，数据量庞大，一次性加载所有数据，不仅会增加页面加载时间，还会消耗过多的网络资源和客户端内存。因此，分页技术成为了优化用户体验和提高性能的关键手段之一。而作为一名前端开发，分页功能我们经常会用到，而且有时候，后端会把数据一次性给我们，需要我们自己处理数据，做前端分页。这里详细介绍下如何使用 VueJS 结合Element UI的分页组件实现前端分页，并通过一个具体的例子来展示其实现过程。而作为一名前端开发，分页功能我们经常会用到，而且有时候，后端会把数据一次性给我们，需要我们自己处理
JSP分页功能实现案例：从基础到应用的全面解析
最新发布
weixin_52937170的博客
09-20 561
基于JSP+JavaBean实现分页功能
前端分页实现demo
09-13
前端分页实现思路，采用java在控制台输出，可替换相应的输出为html，即实现前端的分页输出，输出的页号只依赖与当前页号和总页数
前端分页
会飞的企鹅
03-17 762
1、适合情形 前端分页一般用于数据量较小的情况，一次请求把数据全部从后端请求回来。 2、前端分页例子 前端分页代码示例 cd front-end-page 进入front-end-page 文件夹下 npm install 安装依赖 npm run dev 运行 3、实现关键 使用计算属性对获取的数据进行处理，即computed中frontEndPageChange方
前端分页功能的实现以及原理
weixin_34351321的博客
01-30 266
　分页场景常见于电商网站，比如说淘宝天猫的评论区，分页功能一般是后台实现，前端请求就完事了。现闲得无聊，就写出来玩玩，只实现功能，并未封装。 以前写过一篇下拉刷新、加载数据功能博客，也附上链接，可点击查看！ 基于jq实现分页功能，大致分为以下几步： 定义一个分页方法，可多次调用 参数设置 请求数据页面跳转方法 创建非数字按钮和数据内容区 创建数字按钮 首屏加载 调用 ...
前台Java通用分页详解描述下
06-29
本篇将详细介绍Java中实现前端通用分页的方法和注意事项。 首先，我们需要理解分页的基本概念。分页通常包括两部分：页码和每页显示的数据数量。用户通过选择页码或调整每页显示数量来查看数据的不同部分。在Java中...
JSP自定义带查询条件的通用分页组件详解
本文档详细介绍了如何在JSP环境中实现一个可定制且带有查询条件的通用分页组件。随着企业需求的动态变化，分页功能在Web开发中尤为重要，因为它允许用户灵活地浏览大量数据。本文提供了一个实用的解决方案，以简化...
详解通用分页（前端）
TestXzing的博客
06-29 152
本文详细介绍了在前端怎么使用通用分页
前端分页处理
m0_71349739的博客
08-28 1585
如data:[1,2,3,4,5,6,7,8]，那么data.splice(0,3)就是从第0位开始，删除3个元素，即删除的元素为[1,2,3]，剩余元素为data:[4,5,6,7,8]，此方法会改变原数组。如data:[1,2,3,4,5,6,7,8]，那么data.slice(0,3)就为下标为0，1，2,不包括下标为3的数，即[1,2,3]，可以看成数学中的[0,3)比如：data=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]
前端实现分页效果
热门推荐
welcome
09-09 1万+
前端分页？后端做得了的事，我前端也要做。后端做不了的事，我前端更要做。
element树形table懒加载一分钟解读
qq_41797911的博客
10-29 1623
element树形table懒加载 1、效果图 静态数据格式 tableData1: [ { id: 1, date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { id: 2, date: '2016-05-04', name: '
PHP通用分页程序
03-17
本文将深入探讨PHP分页的实现原理和具体步骤，并通过一个名为“小贤PHP通用分页程序”的实例进行详解。 1. **分页原理** 分页的基本思想是将大量数据分成多个小块（页），每次只加载一部分数据到前端展示，用户...
前端通用分页
weixin_65565181的博客
06-24 274
目录1、核心思路2、封装的PageBean3、封装的PageTag标签4、配置page标签5、bookservlet6、处理中文乱码 3、封装的PageTag标签 4、配置page标签 5、bookservlet 6、处理中文乱码
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值