当前位置:首页 » 网页前端 » 前端分页和后端分页
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

前端分页和后端分页

发布时间: 2022-01-29 18:37:43

1. 关于Mybatis分页问题,请求后端响应给前端的数据明明是所有的集合,为何前端拿到后只有当前页的几条

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

2. js前端分页,与后台无数据交互,写一个json 文件然后$.getJSON(),把数据加载过来之后怎么在前端分页

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>分页</title>
<styletype="text/css">
.grid{
width:400px;
}

.table{
width:100%;
text-align:center;
border:outset#efefef;
border-width:1px0px0px1px;
}
.tableth,td{
line-height:30px;
border:solid#efefef;
border-width:0px1px1px0px;
}
.tabletr{
width:100%;
margin:0auto;
border:none;
overflow:hidden;
color:#2981e4;
font:normal12px/100%"微软雅黑","LucidaGrande","LucidaSans",Helvetica,Arial,Sans;
}

.no-content{
text-align:center;
line-height:36px;
color:red;
font:normal16px/100%"微软雅黑","LucidaGrande","LucidaSans",Helvetica,Arial,Sans;
}

.pager{
padding-top:20px;
text-align:right;
line-height:36px;
color:blue;
font:normal12px/100%"微软雅黑","LucidaGrande","LucidaSans",Helvetica,Arial,Sans;
}

.button,.button:visited{
background-color:#EFEFEF;
border:1pxsolid#d5d5d5;
background:#fff;
padding:2px6px;
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;
}

.pagerinput[type='text']{
width:20px;
color:#333;
padding:4px5px;
border:1pxsolid#e0ecff;
border-radius:2px;
-o-border-radius:2px;
-moz-border-radius:2px;
-wekit-border-radius:2px;
box-shadow:0002pxrgba(255,255,255,0.2);
-o-box-shadow:0002pxrgba(255,255,255,0.2);
-webkit-box-shadow:0002pxrgba(255,255,255,0.2);
-moz-box-shadow:0002pxrgba(255,255,255,0.2);
behavior:url(/PIE.htc);
}
.pagerinput[type='text']:focus,.tableinput[type='text']:hover{
border:1pxsolid#3aa2d0;
outline:none;
}

</style>
</head>
<body>
<divclass="grid">
<divid="content">

</div>
<divid="pager">

</div>
</div>
</body>
</html>
<scripttype="text/javascript">
varjsonData=[];

//生成静态数据
functiongetJsonData(size){
vardatas=[];
for(varidx=0;idx<size;idx++){
datas.push({
account:"Account_"+idx,
userName:"用户_"+idx,
gender:(idx%2==1?"男":"女"),
salary:parseInt(Math.random(idx%50)*10000)+5000
});
}
returndatas;
}

//获取当前页数据
functionquery(cur,size){
varbegin=(cur-1)*size;
varend=cur*size;
returnjsonData.slice(begin,end);
}


window.onload=function(){
//获取JSON数据
jsonData=getJsonData(555);
//加载数据
pageTo(10,1);
};

//加载表格
functionpageTo(pageSize,curPage){
vardataSize=jsonData.length;
if(dataSize==0){
content.innerHTML="<spanclass='no-content'>没有查询到任何数据!</span>";
return;
}
vartotalPage=Math.ceil(dataSize/pageSize);
//table
vardatas=query(curPage,pageSize);
varhtml="<h3>员工信息表</h3><tableclass='table'>";
for(varindex=0;index<datas.length;index++){
vardata=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
varphtml="<divclass='pager'>";
if(curPage==1){
phtml=phtml+"<ahref='#'class='buttonno-page'>上一页</a>";
}else{
phtml=phtml+"<ahref='#'class='button'onclick='pageTo("+pageSize+","+(curPage-1)+");'>上一页</a>";
}
phtml=phtml+"<inputtype='text'value='"+curPage+"'onkeypress='goto(this,"+pageSize+");'>";
if(curPage==totalPage){
phtml=phtml+"<ahref='#'class='buttonno-page'>下一页</a>";
}else{
phtml=phtml+"<ahref='#'class='button'onclick='pageTo("+pageSize+","+(curPage+1)+");'>下一页</a>";
}
phtml=phtml+"&nbsp;共"+totalPage+"页,"+dataSize+"条记录</div>";
pager.innerHTML=phtml;
}

//回车跳转,注意控制输入数字:此处未处理
functiongoto(obj,pageSize){
if(event.keyCode==13){
pageTo(pageSize,parseInt(obj.value));
}
}

</script>

大体思路如上

3. layui分页需要后台也写分页逻辑吗

layui只是一个前端页面,他会传给后端 第几页和每页多少行,需要自己进行处理,回传数据

4. 后台分页代码写了,pageCount总页数,pageNum当前页,perPageNum每页数据量。 请问前台该怎么写

前台就这样显示啊: pageNum/pageCount 首页 上一页 下一页 尾页, 如果pageNum=1,则首页和上一页不允许点击,如果pageNum=pageCount则下一页和尾页不允许点击。上面的情况应该也适用于总数只有一页的情况。 每次翻页只要把当前页pageNum和每页和每页数据量perPageNum(上一页:perPageNum-1,下一页:perPageNum+1,goto:perPageNum=inputValue)传到后台进行计算即可。 你这个分页是在代码里进行,就是每次都要查询所有的数据 ,一般都是在数据库进行分页的,如mysql用limit ageNum*perPageNum,perPageNum

5. java 前端分页插件能动态实现分页吗 还是要自己写分页语句

分页取数据和显示层bootstrap有什么关系?你从后端获取到数据,然后通过bootstrap的分页组件显示就好了吧.后端mvc框架view层一般会提供默认的分页模板,你可以把bootstrap的分页样式加进去,就可以实现动态分页效果了.

6. 前端开发怎样把后台数据列表分页显示

在page类中新加入path属性,用以存储每次转发的路径及携带参数。

private String path;

新建WEBUtils类,获取路径,放在新声明的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)

在要显示的页面写如下代码,主要是分类进行判断。

7. 前端开发 需要根据把后台数据列表 分页显示

搭建项目分页

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=DEPTNUM

SELECT * 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 ENTERDATE


3.分页工具类导入到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工具类传递到,拼接执行动态分页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;

8. 后端做分页需要前端怎么配合啊,要传桉树吗

写一个js用来展示数据,还有一个下一页事情触发从后台查询或者获取数据然后重新展示数据,不需要刷新

9. 网页上面的分页是属于前端还是属于后端,是用什么开发的呢

前后都有。
个人感觉还是后端。毕竟后端处理逻辑比较方便。
后端方便点,前台你要单独输出要更新的内容,麻烦,还要处理分页代码的生成和更新,前台页面也不利于seo。。

10. 排序是在前端排,还是在后端排

这个必须得后端来排序。
第一是有分页的,如果要排序有分页的情况下想要前端排序就需要把所有数据全部都取过来,比如我每页显示50条,数据库共总有10000条,那我要把10000条全部取出来,在前端排序,这不是浪费流量浪费cpu么。
第二,你前端排是需要自己写排序函数,用户点击不同列可以根据不同列排序,你这个要写对应函数,后台就不一样了,从数据库里查询的时候直接可以让数据库去做这个排序的事情,甚至是多字段组合排序,不关sql还是nosql基本都支持排序(mysql,mongodb)
所以排序分页还是让后端去做吧