當前位置:首頁 » 網頁前端 » 前端分頁和後端分頁
擴展閱讀
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)
所以排序分頁還是讓後端去做吧