JavaScript實(shí)現(xiàn)翻頁(yè)功能(附效果圖)
效果圖:
要點(diǎn):
displayPage('#pageDiv','goPage','query',10,1,100);
- #pageDiv是顯示翻頁(yè)的div名稱(chēng)。
- goPage是跳轉(zhuǎn)到后面的文本輸入框的id,如果有需要可以根據(jù) * 這個(gè)參數(shù)直接賦值。
- query是查詢(xún)的方法名稱(chēng)。
- 10是總頁(yè)數(shù)
- 1是當(dāng)前頁(yè)數(shù)
- 100是總條數(shù)。
<%@ 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查詢(xún)表格需要的數(shù)據(jù) var queryPage = queryPage||1; console.log("query page=" + queryPage); //重新生成pageDiv displayPage('#pageDiv','goPage','query',10,1,100); } </script> <body> <button onclick="query()">查詢(xún)</button> <div> 用js實(shí)現(xiàn)的一個(gè)翻頁(yè)。<br/> 使用場(chǎng)景:table中的數(shù)據(jù)通過(guò)ajax查詢(xún),查詢(xún)完畢之后調(diào)用js生成翻頁(yè)控件。<br/> <pre> displayPage('#pageDiv','goPage','query',10,1,100); </pre> </div> <br/> <div id="pageDiv"></div> </body>
page.js
/** * divObj:顯示翻頁(yè)的div,默認(rèn)body。如:#pageDiv * inputId:跳轉(zhuǎn)頁(yè)面的id,默認(rèn)goPage。如:goPage * js:點(diǎn)擊過(guò)之后執(zhí)行js的方法名。默認(rèn)query。如:query * records:總頁(yè)數(shù),默認(rèn)1。 * total:總記錄數(shù),默認(rèn)0。 * page:當(dāng)前頁(yè),默認(rèn)1。 */ function displayPage(divObj,inputId,js,records,page,total){ //設(shè)置默認(rèn)值 divObj = divObj||"body"; inputId = inputId||"goPage"; js=js||"query"; records=records||1; total=total||0; page=page||1; var str = "當(dāng)前第 <span name='page'>"+page+"</span> 頁(yè)"; str += " 共 <span name='total'>"+records+"</span> 頁(yè)"; str += " <a href='javascript:void(0)' onclick='"+js+"(1)'>首頁(yè)</a>"; if(page>1){ str += " <a href='javascript:void(0)' onclick='"+js+"("+(page-1)+")'>上一頁(yè)</a>"; }else{ str += " <a>上一頁(yè)</a>"; } if(page<records){ str += " <a href='javascript:void(0)' onclick='"+js+"("+(page+1)+")'>下一頁(yè)</a>"; }else{ str += " <a>下一頁(yè)</a>"; } str += " <a href='javascript:void(0)' onclick='"+js+"("+records+")'>尾頁(yè)</a>"; str += " 跳轉(zhuǎn)到 <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實(shí)現(xiàn)翻頁(yè)功能(附效果圖),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- jsp實(shí)現(xiàn)上一頁(yè)下一頁(yè)翻頁(yè)功能(示例代碼)
- JavaScript中transform實(shí)現(xiàn)數(shù)字翻頁(yè)效果
- 基于Vuejs框架實(shí)現(xiàn)翻頁(yè)組件
- 移動(dòng)端翻頁(yè)插件dropload.js(支持Zepto和jQuery)
- Js實(shí)現(xiàn)網(wǎng)頁(yè)鍵盤(pán)控制翻頁(yè)的方法
- js實(shí)現(xiàn)翻頁(yè)后保持checkbox選中狀態(tài)的實(shí)現(xiàn)方法
- 一個(gè)JS翻頁(yè)效果
- javascript移動(dòng)端 電子書(shū) 翻頁(yè)效果實(shí)現(xiàn)代碼
相關(guān)文章
JavaScript報(bào)錯(cuò):Uncaught TypeError: Cannot set&n
在 JavaScript 編程中,“Uncaught TypeError: Cannot set property ‘X’ of undefined” 是一種常見(jiàn)的錯(cuò)誤,這種錯(cuò)誤通常發(fā)生在試圖給一個(gè)未定義的對(duì)象的屬性賦值時(shí),本文介紹了JavaScript報(bào)錯(cuò)的解決方案,需要的朋友可以參考下2024-07-07JS實(shí)現(xiàn)隱藏同級(jí)元素后只顯示JS文件內(nèi)容的方法
這篇文章主要介紹了JS實(shí)現(xiàn)隱藏同級(jí)元素后只顯示JS文件內(nèi)容的方法,可實(shí)現(xiàn)將與js文件的同級(jí)元素全部隱藏,只顯示js文件內(nèi)容的功能,涉及javascript針對(duì)頁(yè)面元素的遍歷與屬性修改相關(guān)技巧,需要的朋友可以參考下2016-09-09詳解JavaScript實(shí)現(xiàn)繼承的五種經(jīng)典方式(附圖解)
JavaScript中的繼承是一種機(jī)制,通過(guò)它可以創(chuàng)建一個(gè)對(duì)象,該對(duì)象可以享有另一個(gè)對(duì)象的屬性和方法,本文將詳細(xì)的為大家介紹實(shí)現(xiàn)繼承的五種經(jīng)典方式,感興趣的小伙伴跟著小編一起來(lái)看看吧2023-08-08淺談JavaScript暫時(shí)性死區(qū)與垃圾回收機(jī)制
本文主要介紹了淺談JavaScript暫時(shí)性死區(qū)與垃圾回收機(jī)制,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05原生JS面向?qū)ο髮?shí)現(xiàn)打磚塊小游戲
這篇文章主要為大家詳細(xì)介紹了原生JS面向?qū)ο髮?shí)現(xiàn)打磚塊小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09JavaScript創(chuàng)建對(duì)象的七種經(jīng)典方式分享
JavaScript 創(chuàng)建對(duì)象的方式有很多,通過(guò) Object 構(gòu)造函數(shù)或?qū)ο笞置媪康姆绞揭部梢詣?chuàng)建單個(gè)對(duì)象,顯然這兩種方式會(huì)產(chǎn)生大量的重復(fù)代碼,并不適合量產(chǎn)。本文介紹了七種非常經(jīng)典的創(chuàng)建對(duì)象的方式,希望對(duì)大家有所幫助2022-11-11原生JS實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)方法(附帶封裝的運(yùn)動(dòng)框架)
下面小編就為大家?guī)?lái)一篇原生JS實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)方法(附帶封裝的運(yùn)動(dòng)框架)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10