纯jQuery实现前端分页功能

由于之前自己做过jquery分页，就是调用jni接口时，只能用前台分页解决显示问题。最近看到

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

效果展示：

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

本项目的目录结构：

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

处理显示请求的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 http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
 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代码：

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <link href="/resource/juqery/css/base/jquery-ui-1.9.2.custom.css" rel="external nofollow" rel="stylesheet">
 <link href="/resource/css/css.css" rel="external nofollow" rel="stylesheet">
 <script type="application/javascript" src="/resource/common.js"></script>
 <script type="application/javascript" src="/resource/juqery/js/jquery-1.8.3.js"></script>
 <script type="application/javascript" src="/resource/juqery/js/jquery-ui-1.9.2.custom.js"></script>
 </head>
 <script type="application/javascript">
 //请求一次数据，然后存储到js变量中，保证只发送一条请求
 var datas;
 jQuery(function() {
 $.ajax({
 type: "POST",
 url: "/doPages",
 data: "{}",
 dataType: 'json',
 success: function(data) {
 datas = data;
 getPages(1,5);
 }
 });
 });
 //用于页码跳转方法
 function jumPage(totalPage,psize){
 var cpage=jQuery("#page_no").val();
 if(0< cpage && cpage <= totalPage){
 getPages(cpage,psize);
 }
 else{
 alert("Out of range");
 }
 }
 function getPages(pno,psize) {
 var num;//分页总行数
 var totalPage = 0;//分页总页数
 var pageSize = psize;//分页每行显示数
 var currentPage = pno;//当前页
 num = parseInt(datas.length);//获取数据行数
 if (num / pageSize > parseInt(num / pageSize)) {
 totalPage = parseInt(num / pageSize) + 1;
 } else {
 totalPage = parseInt(num / pageSize);
 }
 var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行
 var endRow = currentPage * pageSize;//结束显示的行
 endRow = (endRow > num) ? num : endRow;
 var tbody = jQuery("#list_data>tbody");
 tbody.empty();
 jQuery.each(datas, function (i, n) {
 var file = JSON.parse(n);
 if (startRow <= parseInt(i + 1) && parseInt(i + 1) <= endRow) {
 var row = createRow().appendTo(tbody);
 //多选用，目前暂时未考虑
 /* createColumn().html("<input type='checkbox' id="+"fileId"+(i+1)+" name='fileId'/>").appendTo(row);*/
 createColumn().text(i + 1).appendTo(row);
 createColumn().text(file.name).appendTo(row);
 createColumn().text(getSize(file.filesize)).appendTo(row);
 var operationColumn = createColumn().appendTo(row);
 }
 //每次执行分页代码时需要将前一次分页的判断结果清空
 jQuery("#last_page").removeAttr("onclick");
 jQuery("#next_page").removeAttr("onclick");
 //当前页非第一页时
 if (currentPage > 1) {
 jQuery("#last_page").attr("onclick", "getPages(" + (parseInt(currentPage) - 1) + "," + psize + ")");
 }
 //当前页小于总页数时
 if (currentPage < totalPage) {
 jQuery("#next_page").attr("onclick", "getPages(" + (parseInt(currentPage) + 1) + "," + psize + ")");
 }
 //显示当前页码、总页数及生成跳转点击事件
 jQuery("#end_page").attr("onclick", "getPages(" + (totalPage) + "," + psize + ")");
 jQuery("#first_page").attr("onclick", "getPages(" + (1) + "," + psize + ")");
 jQuery("#jump_page").attr("onclick", "jumPage(" + (totalPage) + "," + psize + ")");
 jQuery("#total_page").val("/" + totalPage + " 页");
 jQuery("#page_no").val(currentPage);
 var btnDownload = jQuery("<button class='btn_download'>下载</button>");
 var btnDelete = jQuery("<button class='btn_delete'>删除</button>");
 //批量删除获取文件信息用，目前暂时不用
 /*jQuery("#"+"fileId"+(i+1)).attr("recordQuery",JSON.stringify(recordQuery));*/
 btnDownload.click(function () {
 location.href = "/download?filename=" + file.name;
 });
 btnDelete.click(function () {
 recordQuery = jQuery(this).attr("data-record-query");
 var dialogDiv = jQuery("<div></div>");
 dialogDiv.dialog({
 autoOpen: false,
 modal: true,
 width: 500,
 position: {my: "center", at: "center", of: jQuery(".content_wrapper_hidden")},
 title: "文件删除",
 buttons: [
 {
 text: "确认",
 click: function () {
 jQuery.post("/delete", file.name, function (data) {
 location.reload();
 });
 jQuery(this).dialog("close");
 }
 },
 {
 text: "取消",
 click: function () {
 jQuery(this).dialog("close");
 }
 }
 ]
 });
 var text = "确认删除 "+ file.name + "?";
 dialogDiv.text(text).dialog("open");
 });
 btnDownload.appendTo(operationColumn);
 btnDelete.appendTo(operationColumn);
 });
 jQuery(".btn_download,.btn_delete").button();
 }
 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;
 }
 </script>
 <style>
 .data tbody tr td:first-child{
 font-weight:bold;
 cursor: pointer;
 }
 </style>
 <body>
 <div class="main_wrapper">
 <div class="content_wrapper_hidden">
 <div class="ui_wrapper">
 <table id="list_data" class="data" border="0" cellspacing="0" cellpadding="0" style="width: 100%">
 <thead>
 <tr>
 <th >Num</th>
 <th >Files</th>
 <th >Size</th>
 <th >Operation</th>
 </tr>
 </thead>
 <tbody>
 </tbody>
 </table>
 <!-- 分页用按钮-->
 <table class="ui-corner-all grey" style="width: 100%">
 <tbody align="center" valign="middle">
 <tr><td><div id="pagination">
<!-- 全选和批量删除按钮，目前暂时未考虑-->
<!--<input type="button" id='fileIds' style="background: -moz-linear-gradient(top,#ffffff,#e6e6e6);border-color:#c5c5c5" value="全选"/><input type="button" id='delete_fileIds' style="background: -moz-linear-gradient(top,#ffffff,#e6e6e6);border-color:#c5c5c5" value="删除"/>-->
 <input type="button" id='first_page' style="background: -moz-linear-gradient(top,#ffffff,#e6e6e6);border-color:#c5c5c5" value="首页"/><input type="button" style="background: -moz-linear-gradient(top,#ffffff,#e6e6e6);border-color:#c5c5c5" id='last_page' value="上一页"/><input type="button" id='next_page' style="background: -moz-linear-gradient(top,#ffffff,#e6e6e6);border-color:#c5c5c5" value="下一页"/><input type="button" style="background: -moz-linear-gradient(top,#ffffff,#e6e6e6);border-color:#c5c5c5" id='end_page' value="尾页"/><input type="button" style="background: -moz-linear-gradient(top,#ffffff,#e6e6e6);border-color:#c5c5c5" id='jump_page' value="跳转"/>
 <input autocomplete="off" class="ui-autocomplete-input" id="page_no" style="height: 20px;width:30px"/><input type="button" style="background: -moz-linear-gradient(top,#ffffff,#e6e6e6);border: none" id='total_page' value="0 页" /></div></td></tr>
 </tbody>
 </table>
 <!-- 分页用按钮-->
 </div>
 </div>
 </div>
 </body>
</html>

分页的核心jquery代码：

function getPages(pno,psize) {
 var num;//分页总行数
 var totalPage = 0;//分页总页数
 var pageSize = psize;//分页每行显示数
 var currentPage = pno;//当前页
 num = parseInt(datas.length);//获取数据行数
 if (num / pageSize > parseInt(num / pageSize)) {
 totalPage = parseInt(num / pageSize) + 1;
 } else {
 totalPage = parseInt(num / pageSize);
 }
 var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行
 var endRow = currentPage * pageSize;//结束显示的行
 endRow = (endRow > num) ? num : endRow;
 var tbody = jQuery("#list_data>tbody");
 tbody.empty();
 jQuery.each(datas, function (i, n) {
 var file = JSON.parse(n);
 if (startRow <= parseInt(i + 1) && parseInt(i + 1) <= endRow) {
 var row = createRow().appendTo(tbody);
 //多选用，目前暂时未考虑
 /* createColumn().html("<input type='checkbox' id="+"fileId"+(i+1)+" name='fileId'/>").appendTo(row);*/
 createColumn().text(i + 1).appendTo(row);
 createColumn().text(file.name).appendTo(row);
 createColumn().text(getSize(file.filesize)).appendTo(row);
 var operationColumn = createColumn().appendTo(row);
 }
 //每次执行分页代码时需要将前一次分页的判断结果清空
 jQuery("#last_page").removeAttr("onclick");
 jQuery("#next_page").removeAttr("onclick");
 //当前页非第一页时
 if (currentPage > 1) {
 jQuery("#last_page").attr("onclick", "getPages(" + (parseInt(currentPage) - 1) + "," + psize + ")");
 }
 //当前页小于总页数时
 if (currentPage < totalPage) {
 jQuery("#next_page").attr("onclick", "getPages(" + (parseInt(currentPage) + 1) + "," + psize + ")");
 }
 //显示当前页码、总页数及生成跳转点击事件
 jQuery("#end_page").attr("onclick", "getPages(" + (totalPage) + "," + psize + ")");
 jQuery("#first_page").attr("onclick", "getPages(" + (1) + "," + psize + ")");
 jQuery("#jump_page").attr("onclick", "jumPage(" + (totalPage) + "," + psize + ")");
 jQuery("#total_page").val("/" + totalPage + " 页");
 jQuery("#page_no").val(currentPage);
 var btnDownload = jQuery("<button class='btn_download'>下载</button>");
 var btnDelete = jQuery("<button class='btn_delete'>删除</button>");
 //批量删除获取文件信息用，目前暂时不用
 /*jQuery("#"+"fileId"+(i+1)).attr("recordQuery",JSON.stringify(recordQuery));*/
 btnDownload.click(function () {
 location.href = "/download?filename=" + file.name;
 });
 btnDelete.click(function () {
 recordQuery = jQuery(this).attr("data-record-query");
 var dialogDiv = jQuery("<div></div>");
 dialogDiv.dialog({
 autoOpen: false,
 modal: true,
 width: 500,
 position: {my: "center", at: "center", of: jQuery(".content_wrapper_hidden")},
 title: "文件删除",
 buttons: [
 {
 text: "确认",
 click: function () {
 jQuery.post("/delete", file.name, function (data) {
 location.reload();
 });
 jQuery(this).dialog("close");
 }
 },
 {
 text: "取消",
 click: function () {
 jQuery(this).dialog("close");
 }
 }
 ]
 });
 var text = "确认删除 "+ file.name + "?";
 dialogDiv.text(text).dialog("open");
 });
 btnDownload.appendTo(operationColumn);
 btnDelete.appendTo(operationColumn);
 });
 jQuery(".btn_download,.btn_delete").button();
 }

用于页面跳转的js代码：

//用于页码跳转方法
 function jumPage(totalPage,psize){
 var cpage=jQuery("#page_no").val();
 if(0< cpage && cpage <= totalPage){
 getPages(cpage,psize);
 }
 else{
 alert("Out of range");
 }
 }

计算文件的大小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：

//请求一次数据，然后存储到js变量中，保证只发送一条请求
 var datas;
 jQuery(function() {
 $.ajax({
 type: "POST",
 url: "/doPages",
 data: "{}",
 dataType: 'json',
 success: function(data) {
 datas = data;
 getPages(1,5);
 }
 });
 });

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

function createColumn() {
 return jQuery("<td></td>");
}
function createRow() {
 return jQuery("<tr></tr>");
}
function createEle(tag){
 return jQuery("<"+tag+"></"+tag+">");
}
function reload(){
 window.location.reload();
} 
function toURL(url){
 window.location.href=url;
}
function isString(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：

代码.GitHub：https://github.com/Wenchaozou/JqueryForPages

百度云链接：https://pan.baidu.com/s/1dE5Cj5n

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

jquery实现前端分页 jquery 前端分页