JavaScript實現(xiàn)翻頁功能(附效果圖)
更新時間:2017年02月16日 10:40:57 作者:全棧未遂工程師
這篇文章主要介紹了JavaScript實現(xiàn)翻頁功能(附效果圖),在項目需求中經(jīng)常遇到,今天小編抽時間給大家分享JavaScript實現(xiàn)翻頁功能實例代碼,需要的朋友參考下吧
效果圖:
要點:
displayPage('#pageDiv','goPage','query',10,1,100);
- #pageDiv是顯示翻頁的div名稱。
- goPage是跳轉到后面的文本輸入框的id,如果有需要可以根據(jù) * 這個參數(shù)直接賦值。
- query是查詢的方法名稱。
- 10是總頁數(shù)
- 1是當前頁數(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查詢表格需要的數(shù)據(jù) 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實現(xiàn)的一個翻頁。<br/> 使用場景:table中的數(shù)據(jù)通過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:點擊過之后執(zhí)行js的方法名。默認query。如:query * records:總頁數(shù),默認1。 * total:總記錄數(shù),默認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實現(xiàn)翻頁功能(附效果圖),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
JavaScript報錯:Uncaught TypeError: Cannot set&n
在 JavaScript 編程中,“Uncaught TypeError: Cannot set property ‘X’ of undefined” 是一種常見的錯誤,這種錯誤通常發(fā)生在試圖給一個未定義的對象的屬性賦值時,本文介紹了JavaScript報錯的解決方案,需要的朋友可以參考下2024-07-07詳解JavaScript實現(xiàn)繼承的五種經(jīng)典方式(附圖解)
JavaScript中的繼承是一種機制,通過它可以創(chuàng)建一個對象,該對象可以享有另一個對象的屬性和方法,本文將詳細的為大家介紹實現(xiàn)繼承的五種經(jīng)典方式,感興趣的小伙伴跟著小編一起來看看吧2023-08-08JavaScript創(chuàng)建對象的七種經(jīng)典方式分享
JavaScript 創(chuàng)建對象的方式有很多,通過 Object 構造函數(shù)或對象字面量的方式也可以創(chuàng)建單個對象,顯然這兩種方式會產生大量的重復代碼,并不適合量產。本文介紹了七種非常經(jīng)典的創(chuàng)建對象的方式,希望對大家有所幫助2022-11-11原生JS實現(xiàn)圖片無縫滾動方法(附帶封裝的運動框架)
下面小編就為大家?guī)硪黄鶭S實現(xiàn)圖片無縫滾動方法(附帶封裝的運動框架)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10