首页
所有分类
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 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery层叠选择器用法实例分析
Jun 28 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 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
E1-XM(1) VOLVO(1) 沃尔沃(1) ETON(1) 摩托罗拉(1) S900(1) 军机(1) 66-XI(1) MOTOROLA(1) R601SW(1)
You might like
15个小时----从修改程序到自己些程序
2006/10/09 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
PHP缓存集成库phpFastCache用法
2014/12/15 PHP
php实现随机生成易于记忆的密码
2015/06/19 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
页面只有一个text的时候，回车自动submit的解决方法
2010/08/12 Javascript
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
js中的push和join方法使用介绍
2013/10/08 Javascript
给ListBox添加双击事件示例代码
2013/12/02 Javascript
javascript实现五星评价代码（源码下载）
2015/08/11 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
jQuery实现分页功能（含ajax请求、后台数据、附完整demo）
2017/04/03 jQuery
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
学习和使用python的13个理由
2019/07/30 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
浅析rem和em和px vh vw和% 移动端长度单位
2016/04/28 HTML / CSS
面料业务员岗位职责
2013/12/26 职场文书
后备干部考察材料
2014/02/12 职场文书
护士节策划方案
2014/05/19 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
2014年信用社工作总结
2014/11/25 职场文书
党员示范岗材料
2014/12/19 职场文书