【js】pagination分页（支持首页，末页，跳转）
生活随笔
收集整理的這篇文章主要介紹了
【js】pagination分页（支持首页，末页，跳转）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
demo下載
http://download.csdn.net/detail/yjqyyjw/9911419
| maxentries | 總條目數 | 必選參數，整數 |
| items_per_page | 每頁顯示的條目數 | 可選參數，默認是10 |
| num_display_entries | 連續分頁主體部分顯示的分頁條目數 | 可選參數，默認是10 |
| current_page | 當前選中的頁面 | 可選參數，默認是0，表示第1頁 |
| num_edge_entries | 兩側顯示的首尾分頁的條目數 | 可選參數，默認是0 |
| link_to | 分頁的鏈接 | 字符串, 可選參數，默認是”#” |
| first_text | “首頁”按鈕上顯示的文字 | 字符串參數，可選，默認是”First” |
| prev_text | “前一頁”分頁按鈕上顯示的文字 | 字符串參數，可選，默認是”Prev” |
| next_text | “下一頁”分頁按鈕上顯示的文字 | 字符串參數，可選，默認是”Next” |
| last_text | “末頁”按鈕上顯示的文字 | 字符串參數，可選，默認是”Last” |
| ellipse_text | 省略的頁數用什么文字表示 | 可選字符串參數，默認是”…” |
| prev_show_always | 是否顯示“前一頁”分頁按鈕 | 布爾型，可選參數，默認為true，即顯示“前一頁”按鈕 |
| next_show_always | 是否顯示“下一頁”分頁按鈕 | 布爾型，可選參數，默認為true，即顯示“下一頁”按鈕 |
| callback | 回調函數 | 默認無執行效果 |
1、java
package test;/*** 用于分頁的工具類*/ public class Page {private int total = 0; // 總記錄數private int limitLength = 20; // 每頁顯示記錄數private int limitStart = 0; // 每頁起始記錄數private int pages = 1; // 總頁數private int pageNow = 1; // 當前頁public Page(int total, int pageNow) {init(total, pageNow, limitLength);}public Page(int total, int pageNow, int limitLength) {init(total, pageNow, limitLength);}private void init(int total, int pageNow, int limitLength){//設置基本參數this.total=total;this.limitLength=limitLength;this.pages=(this.total-1)/this.limitLength+1;//根據輸入可能錯誤的當前號碼進行自動糾正if(pageNow<1){this.pageNow=1;}else if(pageNow>this.pages){this.pageNow=this.pages;}else{this.pageNow=pageNow;}this.limitStart = this.limitStart + (this.pageNow-1) * this.limitLength;}public int getTotal() {return total;}public int getPages() {return pages;}public int getpageNow() {return pageNow;}public int getLimitLength() {return limitLength;}public int getLimitStart() {return limitStart;}public int getPageNow() {return pageNow;}public String toString(){String str=new String();str= "[" +"total="+total+",pages="+pages+",pageNow="+pageNow+",limitStart="+limitStart+",limitLength="+limitLength;str+="]";return str;}public static void main(String[] args) {//記錄數 當前頁 起始條數Page p = new Page(21, 3, 2);System.out.println(p.toString());} }2、html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="css/pagination.css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.pagination.js"></script><script language="javascript" type="text/javascript">$(document).ready(function() {//加入分頁的綁定 $("#Pagination").pagination(200, {callback : pageselectCallback,items_per_page : 10,num_display_entries : 5,current_page : 0,num_edge_entries : 0});});//這個事件是在翻頁時候用的 function pageselectCallback(page_id, jq) {alert(page_id);} </script> <title>Pagination</title> </head> <body><div id="Pagination" class="pagination"></div> </body> </html>3、js
/*** This jQuery plugin displays pagination links inside the selected elements.** @author Gabriel Birke (birke *at* d-scribe *dot* de)* @version 1.2* @param {int} maxentries Number of entries to paginate* @param {Object} opts Several options (see README for documentation)* @return {Object} jQuery Object*/ jQuery.fn.pagination = function(maxentries, opts){opts = jQuery.extend({items_per_page:10,num_display_entries:10,current_page:0,num_edge_entries:0,link_to:"#",first_text: "首頁",last_text: "尾頁",prev_text:"上一頁",next_text:"下一頁",ellipse_text:"...",prev_show_always:true,next_show_always:true,callback:function(){return false;}},opts||{});return this.each(function() {/*** 計算最大分頁顯示數目*/function numPages() {return Math.ceil(maxentries/opts.items_per_page);} /*** 極端分頁的起始和結束點，這取決于current_page 和 num_display_entries.* @返回 {數組(Array)}*/function getInterval() {var ne_half = Math.ceil(opts.num_display_entries/2);var np = numPages();var upper_limit = np-opts.num_display_entries;var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half, upper_limit), 0):0;var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(opts.num_display_entries, np);return [start,end];}/*** 分頁鏈接事件處理函數* @參數 {int} page_id 為新頁碼*/function pageSelected(page_id, evt){current_page = page_id;drawLinks();var continuePropagation = opts.callback(page_id, panel);if (!continuePropagation) {if (evt.stopPropagation) {evt.stopPropagation();}else {evt.cancelBubble = true;}}return continuePropagation;}/*** 此函數將分頁鏈接插入到容器元素中*/function drawLinks() {panel.empty();var interval = getInterval();var np = numPages();// 這個輔助函數返回一個處理函數調用有著正確page_id的pageSelected。var getClickHandler = function(page_id) {return function(evt){ return pageSelected(page_id,evt); }}//輔助函數用來產生一個單鏈接(如果不是當前頁則產生span標簽)var appendItem = function(page_id, appendopts){page_id = page_id<0?0:(page_id<np?page_id:np-1); // 規范page id值appendopts = jQuery.extend({text:page_id+1, classes:""}, appendopts||{});if(page_id == current_page){var lnk = jQuery("<span class='current'>"+(appendopts.text)+"</span>");}else{var lnk = jQuery("<a>"+(appendopts.text)+"</a>").bind("click", getClickHandler(page_id)).attr('href', opts.link_to.replace(/__id__/,page_id)); }if(appendopts.classes){lnk.addClass(appendopts.classes);}panel.append(lnk);}// firstPage 跳轉到首頁if (opts.first_text && (current_page > 0 || opts.prev_show_always)) { appendItem(0, { text: opts.first_text, classes: "prev disabled" }); } // 產生"Previous"-鏈接if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});}// 產生起始點if (interval[0] > 0 && opts.num_edge_entries > 0){var end = Math.min(opts.num_edge_entries, interval[0]);for(var i=0; i<end; i++) {appendItem(i);}if(opts.num_edge_entries < interval[0] && opts.ellipse_text){jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);}}// 產生內部的些鏈接for(var i=interval[0]; i<interval[1]; i++) {appendItem(i);}// 產生結束點if (interval[1] < np && opts.num_edge_entries > 0){if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text){jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);}var begin = Math.max(np-opts.num_edge_entries, interval[1]);for(var i=begin; i<np; i++) {appendItem(i);}}// 產生 "Next"-鏈接if(opts.next_text && (current_page < np-1 || opts.next_show_always)){appendItem(current_page+1,{text:opts.next_text, classes:"next"});}// lastPage 跳轉到尾頁if (opts.last_text && (current_page < np - 1 || opts.next_show_always)) { appendItem(np, { text: opts.last_text, classes: "prev disabled" }); }/****************** Added ***************//*插入一個文本框，用戶輸入并回車后進行跳轉*/var pagetext = '<input id="pagevalue" size="1" value="'+(current_page+1)+'"type="text">';var tosumPage='<span>共</span>'+np+'<span>頁,跳轉至</span>';var toPage='<span><a id="search" href="#">確定</a></span>';$(tosumPage).appendTo(panel);$(pagetext).appendTo(panel);$(toPage).appendTo(panel);$("#search").bind("click",function(evt){var iPageNum = $.trim($("#pagevalue").val()) -1;if(iPageNum<0){alert("超過最小頁數");}else if(iPageNum<np){pageSelected(iPageNum,evt);}else{alert("超過最大頁數");}});/****************** Added End ******************/}//從選項中提取current_pagevar current_page = opts.current_page;//創建一個顯示條數和每頁顯示條數值maxentries = (!maxentries || maxentries < 0)?1:maxentries;opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;//存儲DOM元素，以方便從所有的內部結構中獲取var panel = jQuery(this);// 獲得附加功能的元素this.selectPage = function(page_id){ pageSelected(page_id);}this.prevPage = function(){ if (current_page > 0) {pageSelected(current_page - 1);return true;}else {return false;}}this.nextPage = function(){ if(current_page < numPages()-1) {pageSelected(current_page+1);return true;}else {return false;}}// 所有初始化完成，繪制鏈接drawLinks();// 首次加載是否調用 回調函數 注釋則不調用opts.callback(current_page, this);}); }4、css
@charset "utf-8"; /* pagination */ .pagination{font-size:80%;padding-right: 3px; padding-left: 3px; padding-bottom: 3px; margin: 12px; padding-top: 12px; text-align: center;margin:0 auto;} .pagination a{text-decoration:none;border:solid 1px #AAE;color:#15B;} .pagination a,.pagination span{display:inline-block;padding:0.3em 0.5em;margin-right:5px;margin-bottom:5px;} .pagination .current{background:#26B;color:#fff;border:solid 1px #AAE;} .pagination .current.prev, .pagination .current.next{color:#999;border-color:#999;background:#fff;}總結
以上是生活随笔為你收集整理的【js】pagination分页（支持首页，末页，跳转）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 项目管理——文档的重要性
- 下一篇： Could not obtain con