首页
所有分类
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插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery实现回到顶部效果
Oct 19 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
邀请函(127) 道歉信(39) 检讨书(456) 介绍信(57) 广播稿(323) 事迹材料(636) 表扬信(62) 辞职信(98) 欢迎词(65) 教学反思(909)
You might like
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
php提取微信账单的有效信息
2018/10/01 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
DOM相关内容速查手册
2007/02/07 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
JS实现简易日历效果
2021/01/25 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
2021/02/08 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
python读取csv文件示例(python操作csv)
2014/03/11 Python
Python中的zipfile模块使用详解
2015/06/25 Python
Python有序字典简单实现方法示例
2017/09/28 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
python实现比较文件内容异同
2018/06/22 Python
快速排序的四种python实现（推荐）
2019/04/03 Python
Python3列表List入门知识附实例
2020/02/09 Python
如何在django中实现分页功能
2020/04/22 Python
浅析Python 责任链设计模式
2020/09/11 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
爱之链教学反思
2014/04/30 职场文书
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
Python面试不修改数组找出重复的数字
2022/05/20 Python