纯Jquery前端分页

时间:2022-10-18 08:55:20

---恢复内容开始---

由于之前自己做过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="stylesheet">
    <link href="/resource/css/css.css"  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

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

计算文件大小js

页面默认请求jquery:

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

请求jquery

项目中用到了便于生成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/1kVNWVOV 密码: nq55

---恢复内容结束---

纯Jquery前端分页的更多相关文章

  1. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

  2. 纯JS前端分页方法(JS分页)

    1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...

  3. jQuery插件实例六&colon;jQuery 前端分页

    先来看看效果: 对于前端分页,关键是思路,和分页算法.本想多说两句,可又觉得没什么可说的,看代码吧: 如何使用? $("#pging").zPagination({ 'navEve ...

  4. Jquery前端分页插件pagination使用

    插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...

  5. js前端分页之jQuery

    锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...

  6. 前端分页神器,jquery grid的使用(前后端联调),让分页变得更简单。

    jquery grid 是一款非常好用的前端分页插件,下面来讲讲怎么使用. 首先需要引入jquery grid 的CSS和JS (我们使用的是bootstrap的样式) 下面我们通过一个例子来讲解,需 ...

  7. 基于vue2&period;0实现仿百度前端分页效果(一)

    前言 最近在接手一个后台管理项目的时候,由于之前是使用jquery+bootstrap做的,后端使用php yii框架,前后端耦合在一起,所以接手过来之后通过vue进行改造,但依然继续使用的boots ...

  8. EasyUI表格DataGrid前端分页和后端分页的总结

    Demo简介 Demo使用Java.Servlet为后台代码(数据库已添加数据),前端使用EasyUI框架,后台直接返回JSON数据给页面 1.配置Web.xml文件 <?xml version ...

  9. Jeasyui的datagrid前端分页要点

    Jeasyui的分页有两种方式: 1. 服务器端分页,是真正的分页,datagridview的pager会自动把pageSize和pageNum传到后台,后台根据根据pageSize和pageNum构 ...

随机推荐

  1. spring cloud的主要组成部分

    服务发现:Eureka断路器: Hystrix 客户端和控制面板客户端负载均衡: Ribbon声明式REST客户端: Feign外部化配置: Archaius路由和过滤器: Zuul RxJava w ...

  2. iso socket基础2

    iPhone socket 编程之BSD Socket篇 收藏在进行iPhone网络通讯程序的开发中,不可避免的要利用Socket套接字.iPhone提供了Socket网络编程的接口CFSocket, ...

  3. 基于zepto的手机焦点图touchstart touchmove

    基于zepto的手机焦点图,查看地址:demo (建议使用手机浏览器查看)代码如下: <!DOCTYPE HTML> <html> <head> <title ...

  4. (转)spring学习之&commat;ModelAttribute运用详解

    @ModelAttribute使用详解 1 @ModelAttribute注释方法 例子(1),(2),(3)类似,被@ModelAttribute注释的方法会在此controller每个方法执行前被 ...

  5. IDEA新建一个Project和Module的问题

  6. inline-block元素间隙问题原因及解决方法

    inline-block元素间隙问题原因及解决方法 原因: 书写时由空格.换行或回车所产生空白符所致 解决方法: 方法1:font-size:0 方法2:改变书写方式 方法3:使用margin负值 方 ...

  7. Eclipse 使用 SVN 插件后修改用户方法汇总

    http://blog.csdn.net/ShaneLooLi/article/details/50994005 ******************************************* ...

  8. install ros-indigo-map-msgs

    CMake Warning at /opt/ros/indigo/share/catkin/cmake/catkinConfig.cmake: (find_package): Could not fi ...

  9. 转)GPL、BSD、MIT、Mozilla、Apache和LGPL的区别

    开源许可证GPL.BSD.MIT.Mozilla.Apache和LGPL的区别 以下是上述协议的简单介绍: BSD开源协议 BSD开源协议是一个给于使用者很大*的协议.基本上使用者可以”为所欲为”, ...

  10. sharememory&period;c

    //进程通信,共享存储区 #include <unistd.h> #include <sys/types.h> #include <sys/socket.h> #i ...