> 馆藏中心

前端请求后端分页数据,如何在前端分页显示

来源:cnblogs 编辑:王强

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>分页</title>        <style type="text/css">            .grid {                width: 400px;            }                        .table {                width: 100%;                text-align: center;                border: outset #efefef;                border-width: 1px 0px 0px 1px;            }            .table th, td {                line-height: 30px;                border: solid #efefef;                border-width: 0px 1px 1px 0px;            }            .table tr {                width: 100%;                margin: 0 auto;                border: none;                overflow: hidden;                color: #2981e4;                font: normal 12px/100% "微软雅黑e69da5e887aa62616964757a686964616f31333361326263", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;            }            .no-content {                text-align: center;                line-height: 36px;                color: red;                font: normal 16px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;            }            .pager {                padding-top:20px;                text-align: right;                line-height: 36px;                color: blue;                font: normal 12px/100% "微软雅黑", "Lucida Grande", "Lucida Sans", Helvetica, Arial, Sans;            }            .button, .button:visited {                background-color: #EFEFEF;                border: 1px solid #d5d5d5;                background: #fff;                padding: 2px 6px;                margin: 2px;                text-decoration: none;                cursor: pointer            }            .button:hover {                background-color: #2575cf;                color: #fff;            }            .button:active {                top: 1px;            }            .no-page {                background-color: #EFEFEF;                cursor: default;            }                        .pager input[type='text'] {                width: 20px;                color: #333;                padding: 4px 5px;                border: 1px solid #e0ecff;                border-radius: 2px;                -o-border-radius: 2px;                -moz-border-radius: 2px;                -wekit-border-radius: 2px;                box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2);                -o-box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2);                -webkit-box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2);                -moz-box-shadow: 0 0 0 2px rgba(255,255, 255, 0.2);                behavior: url(/PIE.htc);            }            .pager input[type='text']:focus, .table input[type='text']:hover {                border: 1px solid #3aa2d0;                outline: none;            }        </style>    </head>    <body>        <div class="grid">            <div id="content">            </div>            <div id="pager">            </div>        </div>    </body></html><script type="text/javascript">    var jsonData = [];    //生成静态数据    function getJsonData(size) {        var datas = [];        for (var idx = 0; idx < size; idx++) {            datas.push({                account : "Account_" + idx,                userName : "用户_" + idx,                gender : (idx % 2 == 1 ? "男" : "女 "),                salary : parseInt(Math.random(idx % 50) * 10000) + 5000            });        }        return datas;    }    //获取当前页数据    function query(cur, size) {        var begin = (cur - 1) * size;        var end = cur * size;        return jsonData.slice(begin, end);    }    window.onload = function() {        //获取JSON数据        jsonData = getJsonData(555);        //加载数据        pageTo(10, 1);    };    //加载表格    function pageTo(pageSize, curPage) {        var dataSize = jsonData.length;        if (dataSize == 0) {            content.innerHTML = "<span class='no-content'>没有查询到任何数据!</span>";            return;        }        var totalPage = Math.ceil(dataSize / pageSize);        //table        var datas = query(curPage, pageSize);        var html = "<h3>员工信息表</h3><table class='table'>";        for (var index = 0; index < datas.length; index++) {            var data = datas[index];            html = html + "<tr>";            html = html + "<td>" + (data.account || '') + "</td>";            html = html + "<td>" + (data.userName || '') + "</td>";            html = html + "<td>" + (data.gender || '') + "</td>";            html = html + "<td>" + (data.salary || '') + "</td>";            html = html + "</tr>";        }        html = html + "</table>";        content.innerHTML = html;        //pager        var phtml = "<div class='pager'>";        if (curPage == 1) {            phtml = phtml + "<a href='#' class='button no-page'>上一页</a>";        } else {            phtml = phtml + "<a href='#' class='button' onclick='pageTo(" + pageSize + ", " + (curPage - 1) + ");'>上一页</a>";        }        phtml = phtml + "<input type='text' value='" + curPage + "' onkeypress='goto(this, " + pageSize+ ");'>";        if (curPage == totalPage) {            phtml = phtml + "<a href='#' class='button no-page'>下一页</a>";        } else {            phtml = phtml + "<a href='#' class='button' onclick='pageTo(" + pageSize + ", " + (curPage + 1) + ");'>下一页</a>";        }        phtml = phtml + "&nbsp;共" + totalPage + "页," + dataSize + "条记录</div>";        pager.innerHTML = phtml;    }        //回车跳转,注意控制输入数字:此处未处理    function goto(obj, pageSize){        if(event.keyCode==13){            pageTo(pageSize, parseInt(obj.value));        }    }</script>大体思路如上www.179s.com防采集请勿采集本网。

请求的时候返回总条数,把总条数传给分页组件就行了奖励园豆:5

============================================

后端返回的是164条,前端接收却成了5条,确定是164条items?可以用postman测下这个接口。

挂载请求怎么写,不传页码和每页显示的数量吗?

jsp页面分页显示json数据,需要有分页的方法: 参考举例: function $(id) { return document.getElementById(id); } //定义获取ID的方法 function GotoPage(num) { //跳转页 Page = num; OutputHtml(); } var PageSize = 9; //每页个数 var Pag

============================================

后端返回的是164条,前端接收却成了5条,确定是164条items?可以用postman测下这个接口。

@大米饭盖饭: 挂载的时候传 page = 1 和 pageSize = 20 到服务器,服务器返回第一页的数据和总条数,总条数传给分页组件

从数据库一次性读出所有的记录并不是一个好的做法。虽然你完全可以这样做,但是如果你这么做了,你的网站将糟糕得一塌糊涂。 为了能让你不误入歧途,我说一下正确的做法。 方法一:用sql进行分页,获取分页数据。根据Reques.QueryString来获取页

============================================

后端返回的是164条,前端接收却成了5条,确定是164条items?可以用postman测下这个接口。

@by.Genesis: 非常感谢

搭建32313133353236313431303231363533e78988e69d8331333363353766项目分页1.jsp页面<tr><td bgcolor="#00ffff" colspan="10" align="center">第${pager.currentPage}页  每页${pager.pageSize} 条记录 共${pager.totalPages}页  共${pager.totalRows} 条<a href="servlet/UserServlet?num=1&page=1" >首页</a><a href="servlet/UserServlet?num=1&page=${pager.currentPage-1}">上一页</a><a href="servlet/UserServlet?num=1&page=${pager.currentPage+1}">下一页</a><a href="servlet/UserServlet?num=1&page=${pager.totalPages}">末页</a>    </td></tr>2.拼接sql语句SELECT * FROM USERS LEFT JOIN DEPT ON USERDEPT=DEPTNUMSELECT * FROM(SELECT A.*, ROWNUM RN FROM (SELECT * FROM student) A WHERE ROWNUM <=15)WHERE RN >=11 ORDER BY ENTERDATE分页sql:SELECT * FROM(SELECT A.*, ROWNUM RN FROM (SELECT * FROM USERS LEFT JOIN DEPT ON USERDEPT=DEPTNUM) A WHERE ROWNUM <=15)WHERE RN >=11 ORDER BY ENTERDATE3.分页工具类导入到common包:Pager.java在servlet调用:第一个条件:总条数  第二个条件:当前页数String page = request.getParameter("page");//分页调用开始--------------------------------Pager pager = new Pager();int totalRows = userService.getCountRows();pager.setTotalRows(totalRows);if(null != page){pager.setCurrentPage(Integer.parseInt(page));}else{pager.setCurrentPage(1);}request.setAttribute("pager", pager);//给页面分页赋值4.把pager工具类传递到dao,拼接执行动态分页sql语句开始条数:pager.getStartRow()结束条:pager.getCurrentPage()*pager.getPageSize()String sql="SELECT * FROM(SELECT A.*, ROWNUM RN FROM (SELECT * FROM USERS LEFT JOIN DEPT ON USERDEPT=DEPTNUM) A WHERE ROWNUM <="+pager.getCurrentPage()*pager.getPageSize()+")WHERE RN >="+pager.getStartRow();//分页sql  1-3条分页根本条件:private int totalRows; //总行数    private int pageSize = 5; //每页显示的行数      private int currentPage=1; //当前页号    private int totalPages; //总页数     private int startRow; //当前页在数据库中的起始行private int endRow;  //数据库执行sql的结束行totalPages算法:if(totalRows<=pageSize){totalPages=1;}else{totalPages=(totalRows+pageSize-1)/pageSize;}startRow; 算法:startRow=(currentPage-1) * pageSize+1;endRow; endRow=currentPage* pageSize;,在baipage类中新加入path属性,用du以存储每次转发的路径及zhi携带参数。private String path;新建daoWEBUtils类,获取路径,放在新声内明容的url中,简便页面中的EL表达式。public static String getPath(HttpServletRequest request){String requestURI = request.getRequestURI();//获取请求路径String queryString = request.getQueryString();//获取请求参数String url = requestURI+"?"+queryString;if(url.contains("&pageNo")){url = url.substring(0, url.indexOf("&pageNo"));}return url;}在servlet中将WEBUtils中获取的url放入page中。page.setPath(url)在要显示的页面写如下代码,主要是分类进行判断。本回答被网友采纳,用ajax异步请求数据更多追问追答追问可以写出具体代码吗?跪求~追答创建WebService.asmx,在里面写一个方法,前台用ajax post值function 方法名(参数) { var megr = "0|0"; $.ajaxSetup({ async: false, cache: false }); $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "WebService.asmx/分页方法名", data: "{参数名" + 参数值 + "}",方法需要的参数 dataType: 'json', success: function (result) { megr = result.d; }, error: function () { } }); return megr;}前台把点击的页面传过去,然后在后台根据每页显示的个数算出第n也是第几条到第几条的数据,然后用js动态加载出来就可以了,大概思路就是这样的追问多谢多谢~本回答被提问者采纳内容来自www.179s.com请勿采集。

本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。本文《前端请求后端分页数据,如何在前端分页显示》转载自cnblogs,版权归原作者所有,若侵权请联系:E-MAIL:513175919@qq.com
违法违规信息请立即联系本网可获得现金奖励,TEL:1-8-2-1-0-2-3-3-3-8-1(电话仅供违法违规信息举报,侵权类信息请EMAIL。)

www.179s.com false 互联网 http://www.179s.com/jsblogcnk/pd/pddxad.html report 22156 请求的时候返回总条数,把总条数传给分页组件就行了奖励园豆:5============================================挂载请求怎么写,不传页码和每页显示的数量吗?============================================@大米饭盖饭: 挂载的时候传 page = 1 和 pageSize = 20 到服务器,服务器返回第一页的数据和总条数,总条数传给分页组件===============================

热门图片

经济金融企业管理法律法规社会民生科学教育降生活体育运动文化艺术电子数码电脑网络娱乐休闲行政地区心理分析医疗卫生