纯jQuery实现前端分页功能

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

效果展示：

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

本项目的目录结构：

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

处理显示请求的servlet:

rush:java;"> 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,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：

rush:java;"> 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,IOException { doGet(req,resp); } @Override protected void doGet(HttpServletRequest req,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配置：

rush:xml;">

PageServlet

com.cn.action.PagesServlet

PageServlet

/doPages

DownServlet

com.cn.action.DownloadFile

DownServlet

/download

web.xml

前台完整HTML代码：

rush:xhtml;"> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> nofollow" rel="stylesheet"> nofollow" rel="stylesheet">

Num Files Size Operation 首页"/>上一页"/>下一页"/>跳转"/>

分页的核心jquery代码：

rush:js;"> function getPages(pno,.btn_delete").button(); }

用于页面 跳转的js代码：

rush:js;"> //用于页码跳转方法 function jumPage(totalPage,psize); } else{ alert("Out of range"); } }

计算文件的大小js：

rush:js;"> function getSize(length) { var len,unit; if (length == 0) { len = 0; unit = "B"; } else if (length < 1024) { len = length; unit = "B"; } else if (length < (1024 * 1024)) { len = (length / 1024); unit = "KB"; } else { len = (length / 1024 / 1024); unit = "MB"; } return new Number(len).toFixed(2) + unit; }

页面 默认请求jquery：

rush:js;"> //请求一次数据，然后存储到js变量中，保证只发送一条请求 var datas; jQuery(function() { $.ajax({ type: "POST",5); } }); });

项目中用到了便于生成table的自己编写的js工具：

rush:js;"> function createColumn() { return jQuery("sstring(obj){ return typeof(obj) == "string"; } function isObject(obj){ return typeof(obj) == "object"; } function fillSelect(select,data,valueKey,textKey){ var $select = isstring(select) ? jQuery(select) : select; $select.empty(); jQuery.each(data,function(i,item){ var value = (!isstring(item)) ? item[valueKey] : item; var text = (!isstring(item)) ? item[textKey] : item; var $op = createEle("option").appendTo($select); $op.text(text).val(value); }) }

common.js

为了美观考虑，项目中引用了jquery UI：