效果圖：
要點：
displayPage('#pageDiv','goPage','query',10,1,100);
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%String path = request.getContextPath();%>
<%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<script src="/easyui/jquery-easyui-1.4.3/jquery.min.js"></script>
<script src="page.js"></script>
<script>
function query(queryPage){
//ajax查詢表格需要的數據
var queryPage = queryPage||1;
console.log("query page=" + queryPage);
//重新生成pageDiv
displayPage('#pageDiv','goPage','query',10,1,100);
}
</script>
<body>
<button onclick="query()">查詢</button>
<div>
用js實現的一個翻頁。<br/>
使用場景：table中的數據通過ajax查詢，查詢完畢之后調用js生成翻頁控件。<br/>
<pre>
displayPage('#pageDiv','goPage','query',10,1,100);
</pre>
</div>
<br/>
<div id="pageDiv"></div>
</body>
page.js
/**
* divObj:顯示翻頁的div，默認body。如：#pageDiv
* inputId:跳轉頁面的id，默認goPage。如：goPage
* js:點擊過之后執行js的方法名。默認query。如：query
* records:總頁數，默認1。
* total：總記錄數，默認0。
* page：當前頁，默認1。
*/
function displayPage(divObj,inputId,js,records,page,total){
//設置默認值
divObj = divObj||"body";
inputId = inputId||"goPage";
js=js||"query";
records=records||1;
total=total||0;
page=page||1;
var str = "當前第 <span name='page'>"+page+"</span> 頁";
str += " 共 <span name='total'>"+records+"</span> 頁";
str += " <a href='javascript:void(0)' onclick='"+js+"(1)'>首頁</a>";
if(page>1){
str += " <a href='javascript:void(0)' onclick='"+js+"("+(page-1)+")'>上一頁</a>";
}else{
str += " <a>上一頁</a>";
}
if(page<records){
str += " <a href='javascript:void(0)' onclick='"+js+"("+(page+1)+")'>下一頁</a>";
}else{
str += " <a>下一頁</a>";
}
str += " <a href='javascript:void(0)' onclick='"+js+"("+records+")'>尾頁</a>";
str += " 跳轉到 <input type='number' min=1 max="+records+" id='"+inputId+"' value="+page+" style='width:40px'/>";
str += " <input type='button' value='go' onclick='var num=$(\"#"+inputId+"\").val();"+js+"(num)'/>";
$(divObj).empty();
$(divObj).append(str);
}
以上所述是小編給大家介紹的JavaScript實現翻頁功能(附效果圖)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
