纯jQuery实现前端分页功能

由于之前自己做过jquery分页,就是调用jni接口时,只能用前台分页解决显示问题。最近看到有人提这样的问题:一个请求传过来上万个数据怎么办?于是萌生了写这篇博客的想法。

效果展示:

纯jQuery实现前端分页功能

因为核心代码主要在前端jquery,为了简便,后台就用servlet遍历本地磁盘目录文件的形式模拟响应的数据。

本项目的目录结构:

纯jQuery实现前端分页功能

本项目的本地遍历文件夹结构:

纯jQuery实现前端分页功能

处理显示请求的servlet:

package com.cn.action; import com.alibaba.fastjson.JSON; import com.cn.entity.Downloadfile; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.*; import java.util.ArrayList; import java.util.List; import java.util.Properties; /** * Created by Nolimitors on 2017/3/17. */ public class PagesServlet extends HttpServlet{ protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { /** *@Author: Nolimitor *@Params: * @param req  * @param resp *@Date: 17:55 2017/3/17 */ doPost(req,resp); } protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { /** *@Author: Nolimitor *@Params: * @param req  * @param resp *@Date: 17:55 2017/3/17 */ Properties props = new Properties(); InputStream in = new BufferedInputStream(new FileInputStream(this.getClass().getResource("/fileroot.properties").getPath())); props.load(in); String rootPath = props.getProperty("Root"); List fileList = new ArrayList(); File file = new File(rootPath); File []files = file.listFiles(); Downloadfile df = new Downloadfile(); for(File f:files) { df.setName(f.getName()); df.setFilesize(Long.toString(f.length())); System.out.println(f.getName()); fileList.add(JSON.toJSONString(df)); } resp.addHeader("Content-type","application/json"); resp.setHeader("content-type", "text/html;charset=UTF-8"); resp.getWriter().print(JSON.toJSONString(fileList)); } } PagesServlet

处理下载文件请求的servlet:

package com.cn.action; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.*; import java.net.URLEncoder; import java.util.Properties; /** * Created by Nolimitors on 2017/3/20. */ public class DownloadFile extends HttpServlet { @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doGet(req,resp); } @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //获取所要下载文件的路径 Properties props = new Properties(); InputStream in = new BufferedInputStream(new FileInputStream(this.getClass().getResource("/fileroot.properties").getPath())); props.load(in); String rootPath = props.getProperty("Root"); String name = req.getParameter("filename"); name = new String(name.getBytes("ISO8859-1"),"UTF-8"); System.out.println(name); //处理请求 //读取要下载的文件 File f = new File(rootPath+"\\"+ name); if(f.exists()){ FileInputStream fis = new FileInputStream(f); String filename=java.net.URLEncoder.encode(f.getName(),"utf-8"); //解决中文文件名下载乱码的问题 byte[] b = new byte[fis.available()]; fis.read(b); //解决中文文件名下载后乱码的问题 resp.setContentType("application/x-msdownload"); resp.setHeader("Content-Disposition", "attachment;filename="+ new String(filename.getBytes("utf-8"),"ISO-8859-1")); //获取响应报文输出流对象 ServletOutputStream out =resp.getOutputStream(); //输出 out.write(b); out.flush(); out.close(); } } } DownloadFile

web.xml配置:

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee " version="3.1"> <servlet> <servlet-name>PageServlet</servlet-name> <servlet-class>com.cn.action.PagesServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>PageServlet</servlet-name> <url-pattern>/doPages</url-pattern> </servlet-mapping> <servlet> <servlet-name>DownServlet</servlet-name> <servlet-class>com.cn.action.DownloadFile</servlet-class> </servlet> <servlet-mapping> <servlet-name>DownServlet</servlet-name> <url-pattern>/download</url-pattern> </servlet-mapping> </web-app> web.xml

前台完整html代码:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwypxj.html