首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

纯jQuery实现前端分页功能

Posted in jQuery onMarch 23, 2017

由于之前自己做过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 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：

纯jQuery实现前端分页功能

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

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

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

纯jQuery实现前端分页功能

- Author -

Nolimiter

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
JQuery EasyUI的一些常用组件
Jul 12 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 #jQuery
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 #jQuery
jQuery插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 #jQuery
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 #jQuery
jQuery插件Echarts实现的渐变色柱状图
Mar 23 #jQuery
jquery实现图片平滑滚动详解
Mar 22 #jQuery
jQuery轻松实现无缝轮播效果
Mar 22 #jQuery
Mint UI(1) 远程桌面(2) Spring JPA(1) REST(1) mt-swipe(1) cmd(1) 相对路径 (1) 慢日志(1) Switch(1) exists(2)
You might like
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
基于php数组中的索引数组和关联数组详解
2018/03/12 PHP
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
Python中用pycurl监控http响应时间脚本分享
2015/02/02 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
python运行其他程序的实现方法
2017/07/14 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
基于wxPython的GUI实现输入对话框（1）
2019/02/27 Python
python挖矿算力测试程序详解
2019/07/03 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
Pytorch 定义MyDatasets实现多通道分别输入不同数据方式
2020/01/15 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
PyInstaller将Python文件打包为exe后如何反编译（破解源码）以及防止反编译
2020/04/15 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
英国网络托管和域名领导者：Web Hosting UK
2017/10/15 全球购物
Hotter Shoes美国官网：英国最受欢迎的舒适鞋
2018/08/02 全球购物
小学生国旗下演讲稿
2014/04/25 职场文书
五一口号
2014/06/19 职场文书
2014年学生工作总结
2014/11/20 职场文书
React配置子路由的实现
2021/06/03 Javascript
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android