JQuery外掛——通用分頁元件
阿新 • • 發佈:2019-02-09
在實際專案開發中,通用的分頁元件是必不可少的。下面描述的是關於JavaScript版的分頁元件。該元件是基於jquery之上開發的。
該元件包括
jquery-1.3.2.min.js; (jquery 核心類庫)
jquery.pager.js; (分頁元件類庫)
PagerDemo.js; (用於js與html分離)
Pager.css ;
PagerDemo.html
執行效果圖如下:
圖一、執行效果圖
具體實現程式碼:
jquery.pager.js
Js程式碼- (function($) {
- $.fn.pager = function(options) {
- var opts = $.extend({}, $.fn.pager.defaults, options);
- return this.each(function() {
-
$(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback));
- $('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto";});
- });
- };
- function renderpager(pagenumber, pagecount, buttonClickCallback) {
-
var $pager = $('<ul class="pages"></ul>'
- $pager.append(renderButton('首頁', pagenumber, pagecount, buttonClickCallback)).append(renderButton('上一頁', pagenumber, pagecount, buttonClickCallback));
- var startPoint = 1;
- var endPoint = 9;
- var thpoint="<li class='thpoint'>...</li>";
- if (pagenumber > 4) {
- startPoint = pagenumber - 4;
- endPoint = pagenumber + 4;
- }
- if (endPoint > pagecount) {
- startPoint = pagecount - 8;
- endPoint = pagecount;
- thpoint = "";
- }
- if (startPoint < 1) {
- startPoint = 1;
- }
- for (var page = startPoint; page <= endPoint; page++) {
- var currentButton = $('<li class="page-number">' + (page) + '</li>');
- page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function() {
- buttonClickCallback(this.firstChild.data);
- });
- currentButton.appendTo($pager);
- }
- $pager.append(thpoint).append(renderButton('下一頁', pagenumber, pagecount, buttonClickCallback)).append(renderButton('末頁', pagenumber, pagecount, buttonClickCallback));
- $pager.append("<li class='thpoint' style='margin-top:3px;'>共: "+pagecount+" 頁</li>");
- var strgoto = $("<li class='thpoint'>當前<input type='text' value='"+pagenumber+"'maxlength='6' id='gotoval' style='width:20px; height:16px;margin-top:-3px;padding-top:2px;padding-left:10px;'/>頁</li>");
- $pager.append(strgoto);
- $pager.append(changepage('go',pagecount,buttonClickCallback));
- return $pager;
- }
- function changepage(buttonLabel,pagecount,buttonClickCallback){
- var $btngoto = $('<li class="pgNext">'+ buttonLabel+'</li>');
- $btngoto.click(function() {
- var gotoval = $('#gotoval').val();
- var patrn = /^[1-9]{1,20}$/;
- if (!patrn.exec(gotoval)){
- alert("請輸入非零的正整數!");
- return false;
- }
- var intval = parseInt(gotoval);
- if(intval > pagecount){
- alert("您輸入的頁面超過總頁數 "+pagecount);
- return ;
- }
- buttonClickCallback(intval);
- });
- return $btngoto;
- }
- function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {
- var $Button = $('<li class="pgNext">' + buttonLabel + '</li>');
- var destPage = 1;
- switch (buttonLabel) {
- case "首頁":
- destPage = 1;
- break;
- case "上一頁":
- destPage = pagenumber - 1;
- break;
- case "下一頁":
- destPage = pagenumber + 1;
- break;
- case "末頁":
- destPage = pagecount;
- break;
- }
- if (buttonLabel == "首頁" || buttonLabel == "上一頁") {
- pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
- }
- else {
- pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
- }
- return $Button;
- }
- $.fn.pager.defaults = {
- pagenumber: 1,
- pagecount: 1};
- })(jQuery);
PagerDemo.js
Js程式碼- $(document).ready(function() {
- init(1);
- });
- //預設載入
- function init(pagenumber){
- //向伺服器傳送請求,查詢滿足條件的記錄
- //$.getJSON('',{},function(data){
- //data 為返回json 物件 幷包括(pagecount、totalcount)的key-value值;
- var data = {'pagecount':15,'totalcount':150};
- $("#pager").pager({ pagenumber: pagenumber, pagecount:data.pagecount,totalcount:data.totalcount, buttonClickCallback: PageClick});
- //});
- }
- //回撥函式
- PageClick = function(pageclickednumber) {
- init(pageclickednumber);
- $("#result").html("Clicked Page " + pageclickednumber);
- }
Pager.css
Css程式碼- /* jquery.page.js css */
- ul.pages {display:block;border:none;text-transform:uppercase;font-size:12px;margin:10px 0 50px;padding:0;}
- ul.pages li {list-style:none;float:left;border:1px solid #b36d41;text-decoration:none;margin:0 5px 0 0;padding:5px;}
- ul.pages li:hover {border:1px solid #afdfe4;background-color:#afdfe4;}
- ul.pages li.pgEmpty {border:1px solid #f0f0f0;color:#d9d6c3;background-color:#f0f0f0;}
- ul.pages li.thpoint {border:none;cursor:auto; color:#000;background-color:#fff;}
- ul.pages li.pgCurrent {padding: 4px 4px;border: 3px double #fff; + border-color: #afdfe4;color:#FFF;font-weight:700;background-color:#afdfe4;}
PagerDemo.html
需要裝載容器div
Html程式碼- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>jQuery.pager.js Test</title>
- <link href="Pager.css" rel="stylesheet" type="text/css" />
- <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
- <script src="jquery.pager.js" type="text/javascript"></script>
- <script src="PagerDemo.js" type="text/javascript"></script>
- </head>
- <body>
- <h1 id="result">Click the pager below.</h1>
- <div id="pager" ></div>
- </body>
- </html>
end...