效果圖：
要點：
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實現翻頁功能(附效果圖)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
