精华内容
下载资源
问答
  • 上节回顾 以上4节我们完成了PDF的预览,和基本功能的实现,前端渲染PDF的原理就是为每一页数据添加canvas,如果要渲染页面的文字就会 canvas 同级添加一个 div 显示文本信息,如果pdf文件页数特别多的时候,就会...

    002446271fb4e240cfb87dc06cb6cf7d.png

    上节回顾

    以上4节我们完成了PDF的预览,和基本功能的实现,前端渲染PDF的原理就是为每一页数据添加canvas,如果要渲染页面的文字就会在 canvas 同级添加一个 div 显示文本信息,如果pdf文件页数特别多的时候,就会重复操作以上操作,导致浏览器的回流和重绘。这就会造成性能浪费,导致页面卡顿。可以自己找一个几千页的PDF文件感受一下。

    有了以上的分析,我们就知道改如何优化PDF渲染,我们假设页面上面有一个列表,列表里面每一个元素都保存着pdf页面信息和文本信息,那么我们的优化就从 pdf 大文件优化转化成了前端页面长列表优化。

    如果是优化长列表,我们能列举出好多优化方案:懒加载,虚拟滚动。我们这节就用虚拟滚动优化PDF大文件 使用的依赖包是 react-virtualized

    react-virtualized

    List: 用法很简单,我们本节只列举出我们必要的一些属性
    • width

    列表的宽度约束,定义 pdf 视图的宽度
    - height

    列表的高度约束,定义 pdf 视图的宽度,如果超过这个高度都不进行 render,只做虚拟的dom

    • rowHeight

    行高,列表元素的高度,可以是一个数字类型或者是一个函数根据索引动态的获取每一个元素的高度

    • rowCount

    当前列表的元素总数

    • rowRenderer

    每行要渲染的内容

    • overscanRowCount

    在列表的可见范围之上/之下呈现的行数。这可以帮助减少在某些浏览器/设备上滚动时的闪烁

    • scrollToAlignment

    控制滚动到行的对齐方式 ('auto','start', 'end','center')

    • scrollToIndex

    滚动到行的索引,可以根据这个属性进行PDF的翻页

    • onRowsRendered

    使用有关刚刚渲染的行的信息调用回调,滚动的时候可以得到的信息{ overscanStartIndex, overscanStopIndex, startIndex:, stopIndex },在这个函数里,我们能够动态的渲染页面,每次只渲染一个页面。

    5555ded040300311778e02e7b14204bc.png
    假如说,dom 中渲染的列表索引是 5 6 7 8 9 1. overscanStartIndex dom 显示所列表的最上面索引 5 2. overscanStopIndex dom 显示所列表的最下面索引 9 3. startIndex: 当前渲染的列表索引 4. stopIndex: 下一个需要渲染的索引

    *更多内容请参考gitHub: https://github.com/bvaughn/react-virtualized

    开始编码

    • 安装并使用
    yarn add react-virtualized
    
    import { List as VList } from 'react-virtualized';
    • 动态渲染页面 PDF 文件每一页的宽和高都是不一样的所以我们需要一个数组保存文件的每一页数据
    const getPageInfo = async (curPdf) => {
        const page = await curPdf.getPage(1);
        const viewport = page.getViewport({ scale: scale * devicePixelRatio });
        const width = viewport.width;
        const height = viewport.height;
        const array = []
        for (let index = 0; index < curPdf.numPages; index++) {
            array.push({ width, height })
        }
        setNumPages(array)
    }

    通过 getPage 函数获取每一个的信息,这里我们只保存第一页的信息,在滚动的时候动态的修改这个数组,保证每一页的数据都是准确的。

    根据 react-virtualized List 文档我们定义一些属性值,编写如下代码

    <VList
        style={{
            margin: 'auto'
        }}
        overscanRowCount={3}
        scrollToAlignment="start"
        rowCount={numPages?.length}
        width={numPages[0].width}
        height={numPages[0].height}
        rowRenderer={renderItem}
        rowHeight={getItemHeight}
        scrollToIndex={currentPage - 1}
        onRowsRendered={({
            overscanStartIndex,
            overscanStopIndex,
            startIndex,
            stopIndex,
        }) => {
            renderPdf(startIndex, pdf)
            setCurrentPage(stopIndex + 1)
        }}
    />

    在 onRowsRendered 函数中,我们在滚动页面的时候,更新当前页码,同样更新渲染当前页面信息

    const renderItem = ({ key, index, style }) => (
        <div key={key} style={{ ...style, border: '1px solid #dddddd' }} data-index={index}>
            <canvas
                data-page-number={index + 1}
                style={{ width: style.width, height: style.height }}
            />
            <div
                data-page-number={index + 1}
                className="textLayer"
                style={{ width: style.width, height: style.height }}
            ></div>
        </div>
    )

    在渲染每一页的内容是,我们定义两个标签,canvas 和 div 分别用来显示 PDF 信息和文本信息。在渲染的时候,通过一下方法,把内容渲染到相应的标签里面

    # 渲染 pdf 信息
    const canvas = document.querySelector(`canvas[data-page-number='${num + 1}']`);
    ... 一系列操作(以上4节己经说过)
    // Render PDF page into canvas context
    const renderContext = {
        canvasContext: context,
        viewport: viewport
    };
    const renderTask = page.render(renderContext);
    
    # 渲染 文本信息
    const textLayerDiv = document.querySelector(`div[data-page-number='${num + 1}']`)
    if (textLayerDiv) {
        // 创建新的TextLayerBuilder实例
        const textLayer = new TextLayerBuilder({
            textLayerDiv,
            pageIndex: page.pageIndex,
            viewport,
        });
    
        textLayer.setTextContent(textContent);
    
        textLayer.render();
    }

    相关函数在之前的文章已经说过,就不再多说啦,这里不同的就是渲染到标签的方式不同,之前是通过js创建div,appendChild,插入到dom,这里是先把dom元素渲染出来,通过属性获得dom元素。

    • 实现翻页 HTML 部分就不再说了,上一节已经说过了,这里只说一下如何实现翻页过程,

    PDF 保存的文件页面信息是从第一页开始的,List 把渲染的内容看成一个长列表,索引值是从0 开始的,通过改变属性 scrollToIndex 的索引实现翻页

    本节完整代码:https://github.com/LiuSandy/react-pdf-render

    到此我们由浅入深的把前端如何优雅的渲染PDF文件都已经讲完了,希望对您有所帮助,欢迎 + VX 公众号【编程琐事】。在 GitHub 给一个 Start 吧!!!
    展开全文
  • 上节回顾 以上4节我们完成了PDF的预览,和基本功能的实现,前端渲染PDF的原理就是为每一页数据添加canvas,如果要渲染页面的文字就会 canvas 同级添加一个 div 显示文本信息,如果pdf文件页数特别多的时候,就会...

    010db5e9c1396a018937efe7a13eee4e.png

    上节回顾

    以上4节我们完成了PDF的预览,和基本功能的实现,前端渲染PDF的原理就是为每一页数据添加canvas,如果要渲染页面的文字就会在 canvas 同级添加一个 div 显示文本信息,如果pdf文件页数特别多的时候,就会重复操作以上操作,导致浏览器的回流和重绘。这就会造成性能浪费,导致页面卡顿。可以自己找一个几千页的PDF文件感受一下。

    有了以上的分析,我们就知道改如何优化PDF渲染,我们假设页面上面有一个列表,列表里面每一个元素都保存着pdf页面信息和文本信息,那么我们的优化就从 pdf 大文件优化转化成了前端页面长列表优化。

    如果是优化长列表,我们能列举出好多优化方案:懒加载,虚拟滚动。我们这节就用虚拟滚动优化PDF大文件 使用的依赖包是 react-virtualized

    react-virtualized

    List: 用法很简单,我们本节只列举出我们必要的一些属性
    • width

    列表的宽度约束,定义 pdf 视图的宽度
    - height

    列表的高度约束,定义 pdf 视图的宽度,如果超过这个高度都不进行 render,只做虚拟的dom

    • rowHeight

    行高,列表元素的高度,可以是一个数字类型或者是一个函数根据索引动态的获取每一个元素的高度

    • rowCount

    当前列表的元素总数

    • rowRenderer

    每行要渲染的内容

    • overscanRowCount

    在列表的可见范围之上/之下呈现的行数。这可以帮助减少在某些浏览器/设备上滚动时的闪烁

    • scrollToAlignment

    控制滚动到行的对齐方式 ('auto','start', 'end','center')

    • scrollToIndex

    滚动到行的索引,可以根据这个属性进行PDF的翻页

    • onRowsRendered

    使用有关刚刚渲染的行的信息调用回调,滚动的时候可以得到的信息{ overscanStartIndex, overscanStopIndex, startIndex:, stopIndex },在这个函数里,我们能够动态的渲染页面,每次只渲染一个页面。

    2320736fedb11844f6fb4cf287568663.png
    假如说,dom 中渲染的列表索引是 5 6 7 8 9 1. overscanStartIndex dom 显示所列表的最上面索引 5 2. overscanStopIndex dom 显示所列表的最下面索引 9 3. startIndex: 当前渲染的列表索引 4. stopIndex: 下一个需要渲染的索引

    *更多内容请参考gitHub: https://github.com/bvaughn/react-virtualized

    开始编码

    • 安装并使用
    yarn add react-virtualized
    
    import { List as VList } from 'react-virtualized';
    • 动态渲染页面 PDF 文件每一页的宽和高都是不一样的所以我们需要一个数组保存文件的每一页数据
    const getPageInfo = async (curPdf) => {
        const page = await curPdf.getPage(1);
        const viewport = page.getViewport({ scale: scale * devicePixelRatio });
        const width = viewport.width;
        const height = viewport.height;
        const array = []
        for (let index = 0; index < curPdf.numPages; index++) {
            array.push({ width, height })
        }
        setNumPages(array)
    }

    通过 getPage 函数获取每一个的信息,这里我们只保存第一页的信息,在滚动的时候动态的修改这个数组,保证每一页的数据都是准确的。

    根据 react-virtualized List 文档我们定义一些属性值,编写如下代码

    <VList
        style={{
            margin: 'auto'
        }}
        overscanRowCount={3}
        scrollToAlignment="start"
        rowCount={numPages?.length}
        width={numPages[0].width}
        height={numPages[0].height}
        rowRenderer={renderItem}
        rowHeight={getItemHeight}
        scrollToIndex={currentPage - 1}
        onRowsRendered={({
            overscanStartIndex,
            overscanStopIndex,
            startIndex,
            stopIndex,
        }) => {
            renderPdf(startIndex, pdf)
            setCurrentPage(stopIndex + 1)
        }}
    />

    在 onRowsRendered 函数中,我们在滚动页面的时候,更新当前页码,同样更新渲染当前页面信息

    const renderItem = ({ key, index, style }) => (
        <div key={key} style={{ ...style, border: '1px solid #dddddd' }} data-index={index}>
            <canvas
                data-page-number={index + 1}
                style={{ width: style.width, height: style.height }}
            />
            <div
                data-page-number={index + 1}
                className="textLayer"
                style={{ width: style.width, height: style.height }}
            ></div>
        </div>
    )

    在渲染每一页的内容是,我们定义两个标签,canvas 和 div 分别用来显示 PDF 信息和文本信息。在渲染的时候,通过一下方法,把内容渲染到相应的标签里面

    # 渲染 pdf 信息
    const canvas = document.querySelector(`canvas[data-page-number='${num + 1}']`);
    ... 一系列操作(以上4节己经说过)
    // Render PDF page into canvas context
    const renderContext = {
        canvasContext: context,
        viewport: viewport
    };
    const renderTask = page.render(renderContext);
    
    # 渲染 文本信息
    const textLayerDiv = document.querySelector(`div[data-page-number='${num + 1}']`)
    if (textLayerDiv) {
        // 创建新的TextLayerBuilder实例
        const textLayer = new TextLayerBuilder({
            textLayerDiv,
            pageIndex: page.pageIndex,
            viewport,
        });
    
        textLayer.setTextContent(textContent);
    
        textLayer.render();
    }

    相关函数在之前的文章已经说过,就不再多说啦,这里不同的就是渲染到标签的方式不同,之前是通过js创建div,appendChild,插入到dom,这里是先把dom元素渲染出来,通过属性获得dom元素。

    • 实现翻页 HTML 部分就不再说了,上一节已经说过了,这里只说一下如何实现翻页过程,

    PDF 保存的文件页面信息是从第一页开始的,List 把渲染的内容看成一个长列表,索引值是从0 开始的,通过改变属性 scrollToIndex 的索引实现翻页

    本节完整代码:https://github.com/LiuSandy/react-pdf-render

    到此我们由浅入深的把前端如何优雅的渲染PDF文件都已经讲完了,希望对您有所帮助,欢迎 + VX 公众号【编程琐事】。在 GitHub 给一个 Start 吧!!!
    展开全文
  • 本篇博客知识点~ 版本一: 实现一个小功能:通过点击页面上不同的页数,去数据库查询不同的信息,更新到页面上。... 页数 = 总行数/每一页显示的记录数+ (总行数%每一页显示的记录数==0?0:1); 本页

    本篇博客知识点~
    版本一:
    实现一个小功能:通过点击页面上不同的页数,去数据库查询不同的信息,更新到页面上。
    版本二:
    在查询的结果集合上继续查询;查询结果数据分页后的分页

    这里写图片描述
    就像图上这样点击不同的页数,去数据库查询出不同的信息处来~

    其实主要难点在于下面。

    如何通过当前页数,查到数据库中对应的信息。

     页数 = 总行数/每一页显示的记录数+ (总行数%每一页显示的记录数==0?0:1);
     本页显示的起始记录数 =  (页数 -1 )* 每一页显示的记录数
    
    在通过 select * from stud limit "+ 本页显示的起始记录数+","+ 每一页显示的记录数 查询出来。

    如何封装数据?

    表数据:每条记录通过Map 来封装。 一个表再通过一个 List<Map>封装。
    
    外面再用一个Map把List封装了,同时还可以封装其他数据。
    /*
     * 必须返回:总页数(int) + 查询的表数据(List<Map<String,String>>)
     * 因此可封装成: 
     * int pageCount = ...
     * List<Map<String,String>> datas = ...
     * Map<String,Object> map = new HashMap<String,Object>();
     * 
     * map.put("pageCount",pageCount); //1
     * map.put("datas",datas);//2
     */

    接下来就是代码了
    实现从数据看查询结果出来并且封装的DAO代码

    package cn.hncu.dao;
    
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    /*
     * 必须返回:总页数(int) + 查询的表数据(List<Map<String,String>>)
     * 因此可封装成: 
     * int pageCount = ...
     * List<Map<String,String>> datas = ...
     * Map<String,Object> map = new HashMap<String,Object>();
     * 
     * map.put("pageCount",pageCount); //1
     * map.put("datas",datas);//2
     */
    
    import org.apache.commons.dbutils.QueryRunner;
    import org.apache.commons.dbutils.handlers.MapListHandler;
    import org.apache.commons.dbutils.handlers.ScalarHandler;
    
    import cn.hncu.utils.C3p0ConnUtils;
    
    public class StudDao implements IStudDAO{
    /*
     * 页数 = 总行数/pageSize  + (总行数%pageSize==0?0:1);
     * 第n页的 起始行数 = (n-1)* pageSize;
     * 
     * (non-Javadoc)
     * @see cn.hncu.dao.IStudDAO#query(int)
     */
        @Override
        public Map<String, Object> query(int pageNo) throws Exception {
            Map<String, Object>  map = new HashMap<String, Object>();
            QueryRunner run = new QueryRunner( C3p0ConnUtils.getDataSource());
            int pageCount = Integer.valueOf(""+run.query("select count(1) from stud", new ScalarHandler()));
    
            int pageSize = 15; //每一页显示15行数据~
            int startNo = (pageNo-1)*pageSize;
            List<Map<String, Object>>  datas= run.query("select * from stud limit "+startNo+","+pageSize, new MapListHandler());
            map.put("datas",datas); //封装好了当前页面的数据总共的行数
            pageCount = pageCount/pageSize + (pageCount%pageSize==0?0:1);
            map.put("pageCount", pageCount);// 封装好了一个总共页数目
            return map;
        }
    }
    

    实现和页面连接的PageServlet代码如下。 (与DAO之间会有几个没有实际作用的接口所以代码没贴了)

    package cn.hncu.servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.Map;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import cn.hncu.service.IPageServiceDAO;
    import cn.hncu.service.PageServiceDao;
    
    public class PageServlet extends HttpServlet {
    //      注入Service
        private IPageServiceDAO psDao = new PageServiceDao();
        public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
                doPost(request, response);
        }
    
        public void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            String spageNo = request.getParameter("pageNo");
            if(spageNo==null || spageNo.trim().length()<=0){
                spageNo = "1";
            }
            Integer pageNo =1;
            Map<String, Object> map  = null;
            try {
                pageNo = Integer.valueOf(spageNo);
                 map = psDao.query(pageNo);
            } catch (NumberFormatException e) {
                System.out.println("请传入正确格式的 数字参数");
                e.printStackTrace();
            } catch (Exception e) {
                System.out.println("导向错误页面");
                e.printStackTrace();
            }
            int pageCount = (Integer) map.get("pageCount");
    
            // 页面只显示最近10页面
            int starPagetNo = pageNo-5; int endPageNo =pageNo+4;
            if(pageNo<=6){
                starPagetNo = 1; endPageNo = starPagetNo + 9;
            }
            if(pageNo>=pageCount-4){
                endPageNo = pageCount;starPagetNo = endPageNo -9;
            }
            //把数据传给前端页面:起始页、结束页、当前页、当前页数据,总页面数
            request.setAttribute("startPageNo", starPagetNo);
            request.setAttribute("endPageNo", endPageNo);
            request.setAttribute("pageNo", pageNo);
            request.setAttribute("resList", map.get("datas"));
            request.setAttribute("pageCount", pageCount);
            request.getRequestDispatcher("/jsps/show.jsp").forward(request, response);
        }
    
    }
    

    最后是显示页面代码show.jsp

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <html>
      <head>
        <title>页面数据显示</title>
      </head>
    
      <body>
            <h3>网页数据分页显示技术</h3>
                <c:if test="${pageNo!=1}">
                    <a href=" <c:url value='/PageServlet?pageNo=${pageNo-1}'/>">上一页</a>
                </c:if>
            <c:forEach begin="${startPageNo}" end="${endPageNo}" var="i">
                <c:if test="${i!=pageNo}">
                    <a href=" <c:url value='/PageServlet?pageNo=${i}'/>" >${i}</a>
                </c:if>
                <c:if test="${i==pageNo}">
                    <a style="font-size: larger;color: red;">  ${i} </a>
                </c:if>
            </c:forEach>
            <c:if test="${pageNo!=pageCount}">
                    <a href=" <c:url value='/PageServlet?pageNo=${pageNo+1}'/>">下一页</a>
                </c:if>
            <hr>
            <c:forEach items="${resList}" var="map">
                ${map.id} ${map.name} <br/>
            </c:forEach>
      </body>
    </html>
    

    最后结果如下。 因为我只完成功能没有加css。 所以有点丑~
    这里写图片描述

    版本二:
    底层查询数据库代码

    
    public class StudDao implements IStudDAO{
    /*
     * 页数 = 总行数/pageSize  + (总行数%pageSize==0?0:1);
     * 第n页的 起始行数 = (n-1)* pageSize;
     * 
     * (non-Javadoc)
     * @see cn.hncu.dao.IStudDAO#query(int)
     */
        @Override
        public Map<String, Object> query(int pageNo,Stud s) throws Exception {
            Map<String, Object>  map = new HashMap<String, Object>();
            QueryRunner run = new QueryRunner( C3p0ConnUtils.getDataSource());
            String sql = "select count(1) from stud where 1=1";
    
            int pageSize = 15; //每一页显示15行数据~
            int startNo = (pageNo-1)*pageSize;
    
    
            String sql2 = "select * from stud where 1=1";
    
            if(s.getId()!=null && s.getId().trim().length()>0){
                sql2 = sql2 + " and id like '%"+s.getId()+"%'";
                sql = sql + " and id like '%"+s.getId()+"%'";
            }
            if(s.getName()!=null && s.getName().trim().length()>0){
                sql2 = sql2 + " and name like '%"+s.getName()+"%'";
                sql = sql + " and name like '%"+s.getName()+"%'";
            }
            sql2 = sql2 +" limit "+startNo+","+pageSize;
    
            int pageCount = Integer.valueOf(""+run.query(sql, new ScalarHandler()));
            List<Map<String, Object>>  datas= run.query(sql2, new MapListHandler());
            map.put("datas",datas); //封装好了当前页面的数据总共的行数
            pageCount = pageCount/pageSize + (pageCount%pageSize==0?0:1);
            map.put("pageCount", pageCount);// 封装好了一个总共页数目
            return map;
        }
    }
    

    Servlet 层代码

    package cn.hncu.servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.util.Map;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import javax.servlet.http.HttpSession;
    
    import cn.hncu.domain.Stud;
    import cn.hncu.service.IPageServiceDAO;
    import cn.hncu.service.PageServiceDao;
    
    public class PageServlet extends HttpServlet {
    //      注入Service
        private IPageServiceDAO psDao = new PageServiceDao();
        public void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
                doPost(request, response);
        }
    
        public void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
    
            HttpSession session = request.getSession();
            Stud s = (Stud) session.getAttribute("stud");
            if(s==null){// 第一次进来~
                s = new Stud();
            }
    
            if(request.getMethod().equalsIgnoreCase("POST")){
                String id = request.getParameter("id");
                String name = request.getParameter("name");
                //Post方式就需要重新封装 Stud 
                s.setId(id);
                s.setName(name);
                session.setAttribute("stud", s);
            }
            request.setAttribute("id", s.getId());
            request.setAttribute("name", s.getName());
    
            //下面不管前面,只负责拿到  要查的页 和 Stud
            String spageNo = request.getParameter("pageNo");
            if(spageNo==null || spageNo.trim().length()<=0){
                spageNo = "1";
            }
            Integer pageNo =1;
            Map<String, Object> map  = null;
            try {
                pageNo = Integer.valueOf(spageNo);
                 map = psDao.query(pageNo,s);
            } catch (NumberFormatException e) {
                System.out.println("请传入正确格式的 数字参数");
                e.printStackTrace();
            } catch (Exception e) {
                System.out.println("导向错误页面");
                e.printStackTrace();
            }
            int pageCount = (Integer) map.get("pageCount");
    
            // 页面只显示最近10页面
            int starPagetNo = pageNo-5; int endPageNo =pageNo+4;
            if(pageNo<=6){
                starPagetNo = 1; endPageNo = starPagetNo + 9;
            }
            if(pageNo>=pageCount-4){
                endPageNo = pageCount;starPagetNo = endPageNo -9;
            }
            if(pageCount<10){
                starPagetNo = 1; endPageNo =pageCount;
            }
            //把数据传给前端页面:起始页、结束页、当前页、当前页数据,总页面数
            request.setAttribute("startPageNo", starPagetNo);
            request.setAttribute("endPageNo", endPageNo);
            request.setAttribute("pageNo", pageNo);
            request.setAttribute("resList", map.get("datas"));
            request.setAttribute("pageCount", pageCount);
            request.getRequestDispatcher("/jsps/show.jsp").forward(request, response);
        }
    
    }
    

    显示页面代码 show.jsp

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <html>
      <head>
        <title>页面数据显示</title>
      </head>
    
      <body>
            <h3>网页数据分页显示技术</h3>
    
            <form action="<c:url value='/PageServlet'/>" method="post">
                id包含:<input type="text" name="id" value="${id }"/> &nbsp; &nbsp;
                Name包含:<input type="text" name="name" value="${name }"/> &nbsp; &nbsp;
                <input type="submit" value="查询一下">
            </form>
    
            <hr>
                <c:if test="${pageNo!=1}">
                    <a href=" <c:url value='/PageServlet?pageNo=${pageNo-1}'/>">上一页</a>
                </c:if>
            <c:forEach begin="${startPageNo}" end="${endPageNo}" var="i">
                <c:if test="${i!=pageNo}">
                    <a href=" <c:url value='/PageServlet?pageNo=${i}'/>" >${i}</a>
                </c:if>
                <c:if test="${i==pageNo}">
                    <a style="font-size: larger;color: red;">  ${i} </a>
                </c:if>
            </c:forEach>
            <c:if test="${pageNo!=pageCount}">
                    <a href=" <c:url value='/PageServlet?pageNo=${pageNo+1}'/>">下一页</a>
            </c:if>
        <select onchange="sub(this);">
            <c:forEach begin="1" end="${pageCount}" var="idx">
               <option <c:if test='${idx==pageNo}'>selected</c:if> value="${idx}"> 第${idx}页 </option>
            </c:forEach>
        </select>
        <script type="text/javascript">
           function sub(obj){
               window.location.href="<c:url value='/PageServlet?pageNo='/>" +obj.value;
           }
        </script>
            <hr>
            <c:forEach items="${resList}" var="map">
                ${map.id} ${map.name} <br/>
            </c:forEach>
      </body>
    </html>
    

    结果页面展示
    查询id包含2 名字包含Tom信息
    这里写图片描述

    展开全文
  • 小飞鱼OA技术交流群里的位朋友跟我说要二开网络硬盘,说起要什么功能呢,就是要...明明记得有个可以设置每页显示多少条的功能来着,系统管理/界面设置下,可以对各个模块显示页数进行设置,这里可以直接把网络硬

    小飞鱼OA技术交流群里的一位朋友跟我说要二开网络硬盘,说起要什么功能呢,就是要批量下载,批量上传。看了一下系统功能,可以批量上传啊。

    至于批量下载,也是可以一次选中多个文件进行下载的,需要切换到列表视图而已。这位朋友说一页只能选10个,效率太低,而且跟客服沟通过说要二次开发才行。

    明明记得有个可以设置每页显示多少条的功能来着,在系统管理/界面设置下,可以对各个模块显示页数进行设置,这里可以直接把网络硬盘设置每页显示100条数据,这样是不是就快多了。

    就这样,通过这样的一个设置操作就可以实现原来预计要开发的内容,系统有的功能用就好了,能不开发咱们就不开发,是不。


    展开全文
  • 总记录数totalCount,当前页数currentPage,每页显示数pageSize。  首先我从数据库中读取数据时,我是仅读取我要显示的条数,我利用了limit(limit用法可以上网搜索资料),然后记录当前页curre
  • 个简单的JAVA分页方法 定义两个Vector,个为储存查询所有记录的totalV,另个储存当前页的记录...每页显示的记录数:int countPerPage; 总页数:int totalPageNum = totalSize/countPerPage; //如...
  • android:ViewPager的无限多页数的设置

    千次阅读 2017-05-24 09:50:30
    比如日历中,就会需要无限多数的左右... 可以准备个无限长的List里面存放的是每页需要显示的数据。而ItemView不要去管,预加载中去创建,回收中去移除即可。 详见如下示例代码: private void setViewPager() {
  • 比如,在一个在线书店里搜索关于ASP.NET 的书的时候,可能结果会是成百上千,而每页只列出十条。而且结果可以根据title(书名),price(价格),page count(页数),author name(作者)等来排序。我们分页和...
  • C# webapi使用layui数据表格显示数据

    千次阅读 2020-02-16 02:40:17
    、图和图二就不用说明了 二、重点是,学习如何从后台传递数据给前台并前台显示数据 1、了解layui请求方式和参数 ...limit:每页显示的条数 2、了解layui的数据格式 如下: 当然,如果你想要修改layui...
  • (1)首先写个PageModel类,里面写了获得pageNo(当前页数),pageSize(每页显示的条数),data(每页显示的记录),recordcount(总的记录数)的get,set方法下面的方法。 (2)泛型Dao(GenericDaoImpl)中...
  • java中如何实现模糊分页查询

    千次阅读 2017-06-22 22:05:51
    分析: 要想将两部分功能进行合并,只两部分独立功能上进行些改变即可, 1.首先查询所有记录数searchTotalSize...currPage当前页,totalSize总记录数, totalPage总页数, PageSize每页显示数, 实现四个属性的set
  • 1.我们可以看到,我们现在页面上将从json中...3.actionCreators中,我们将从json中获取到的数据分成10个一页。 5.reducer中,我们接收数据,并将原来的默认的totalPage替换为刚刚action请求的新的数据的页数 ...
  • 比如,当我们在一个网上书店搜索ASP.NET书籍的时候,可能有几百本相关书籍,但是我们只希望每页显示10条有效记录。而且,我们还希望结果能根据标题、价格、页数和作者等等来进行排序。过去的23个教程中我们研究了...
  • 赋值为11,这样初始分页栏会显示有3页,第一页显示根据查询条件得到的5个结果,点击第二页时,从后台看,action可以得到查询参数并返回5条结果,但是gridpanel里的数据并没有更新,现在的问题是如何让gridpanel根据...
  • php实现简单的分页详解

    千次阅读 2019-03-08 11:02:54
    分页列表显示用的非常多...首先第一页无疑是1,但翻页之后的页面如何确定?下面用到上下页两个a用GET进行传参,我们接收到参数作为当前的页数 当前页面显示的列表 20条数据分4页如何显示?这个问题就转换成页的5...
  • <div><p>学习 React 的过程中实现了个个人主页&#...在 <code>Github</code> 上查找关于如何在 <code>React</code> 实现 <code>markdown</code> 的渲染,查到了这两种库: <ul><li>react-markdown:...
  • 由于不知道GAE里面如何使用统计,故最笨的方法统计了把,有知道的童靴告诉我一下。 每页数量暂时为10,总页数大约是文章总数除以每页数量。页面上还要获取当前页数,具体显示代码如下所示:   页面导航...
  • 如何分页总记录行数 count,每页显示 per,分页的总页数 total_page = ceil(count/per),向上取整获得具体页信息:limit 偏移量,条数 limit (page-1)*per, per二、个分页类,yii组件component 文件名与类名...
  • 我们都知道开发过程中多条件查询+分页一直是个老生常谈得问题,那么今天就来浅谈一下springboot是如何实现得,要想实现分页这个功能那我们就得确定每页显示行数得情况下知道总页数等等一些变量,当然,这些...
  • 要实现这样的功能,一般需要请求数据时加入当前请求页数,以及页的大小(页显示的数量)也有一部分接口是通过请求的开始偏移量和结束偏移量请求数据,例如你一页显示10条数据,第一次(第一页)请求即开始start...
  • 以前不太懂后台的时候一直纠结...请看以下图片的内容: 当前页面只显示两条数据(这个具体每页显示多少条根据业务需要,我这只是做测试而已),那么可以看到总共页数有两页(稍后讲解这个两页是怎么的出来的),页面刚...
  • 比如,当我们在一个网上书店搜索ASP.NET书籍的时候,可能有几百本相关书籍,但是我们只希望每页显示10条有效记录。而且,我们还希望结果能根据标题、价格、页数和作者等等来进行排序。过去的23个教程中我们研究了...
  • 比如,当我们在一个网上书店搜索ASP.NET书籍的时候,可能有几百本相关书籍,但是我们只希望每页显示10条有效记录。而且,我们还希望结果能根据标题、价格、页数和作者等等来进行排序。过去的23个教程中我们研究了...
  • 分页查询sql

    2011-04-23 21:39:00
    一般来说我们数据量大的情况下总是会分页显示(谁也不会下子将几万条数据全部次性显示给用户),这样决定我们返回的查询结果集的参数有两个:当前显示的页数pageIndex和每页显示的记录条数size。这里来举例...
  •  当我们的数据量比较大时候,一页显示不了就分页显示,可以增加用户的体验 3.实现分页的实现思路  分页的变量  1).当前页: nowpage  2).页的大小 pagesize  3).总页数 pages  上取整(总记录
  • 这里利用正则表达式进行匹配,糗事百科是不需要登录的,...3.实现按一次回车显示一个段子的发布页数,发布人,段子内容,点赞数 提取某一页的所有段子 由于网站经常更新,需要更新后及时修改代码,如何修改...
  • paginate_by_sql

    千次阅读 2010-04-16 13:20:00
    每页显示条数和offset值都很容易得到,根据查询结果总数和页条目数也能得到总页数,就是不知道怎么把这些值传给WillPaginate。看了分页的部分主要是collection.rb文件中实现的,但就是无从下手 orz 。充分认识到...
  •  要求,请大家编写个存储过程,要求可以输入表名、每页显示记录数、当前页。返回总记录数,总页数,和返回的结果集。 如果大家忘了oracle中如何分页,请参考第三天的内容。 先自己完成,老师后面给出答案,并...

空空如也

空空如也

1 2 3
收藏数 43
精华内容 17
关键字:

如何在每一页显示页数