Java Imitation Baidu page

Recently in a Imitation Baidu Web page small application, found an elegant and concise page plug-in, and Baidu search for the page is very similar to his two-time package, take out to share with you

Plugin source code

/**
* This jQuery plugin displays pagination links inside the selected elements.
*
* This plugin needs at least jQuery 1.4.2
*
* @author Gabriel Birke (Birke *at* d-scribe *dot* de)
* @version 2.2
* @param {int} maxentries number of entries to Paginate
* @param {Object} opts Several options (see README for documentation)
* @return {Object} JQuery Object
*/
(function ($) {
/**
* @class class for calculating pagination values
*/
$. Paginationcalculator = function (MaxEntries, opts) {
This.maxentries = maxentries;
This.opts = opts;
}

$.extend ($. Paginationcalculator.prototype, {
/**
* Calculate The maximum number of pages
* @method
* @returns {Number}
*/
Numpages:function () {
Return Math.ceil (This.maxentries/this.opts.items_per_page);
},
/**
* Calculate start and end point of pagination links depending on
* Current_page and Num_display_entries.
* @returns {Array}
*/
Getinterval:function (current_page) {
var ne_half = Math.floor (THIS.OPTS.NUM_DISPLAY_ENTRIES/2);
var np = This.numpages ();
var upper_limit = np-this.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 + (this.opts.num_display_entries% 2), NP): Math.min (This.opts.num_display_entries, NP) ;

if (np==1) {
Alert ("Only one page, does not show the previous page next page");
This.opts.prev_show_always=false;
This.opts.next_show_always=false;
}
return {start:start, end:end};
}
});

Initialize JQuery object container for pagination renderers
$. Paginationrenderers = {}

/**
* @class Default renderer for rendering pagination links
*/
$. Paginationrenderers.defaultrenderer = function (MaxEntries, opts) {
This.maxentries = maxentries;
This.opts = opts;
THIS.PC = new $. Paginationcalculator (MaxEntries, opts);
}

$.extend ($. PaginationRenderers.defaultRenderer.prototype, {
/**
* Helper function for generating a single link (or a span tag if it's the current page)
* @param {Number} page_id the page ID for the new item
* @param {Number} current_page
* @param {Object} appendopts Options for the new Item:text and classes
* @returns {jquery} jquery object containing the link
*/
Createlink:function (page_id, Current_page, appendopts) {
var lnk, NP = This.pc.numPages ();
page_id = page_id<0?0: (page_id<np?page_id:np-1); Normalize page ID to sane value
Appendopts = $.extend ({text:page_id+1, classes: ""}, appendopts| | {});
if (page_id = = current_page) {
LNK = $ ("<span class= ' current ' >" + appendopts.text + "</span>");
}
Else
{
LNK = $ ("<a>" + Appendopts.text + "</a>")
. attr (' href ', this.opts.link_to.replace (/__id__/,page_id));
}
if (appendopts.classes) {lnk.addclass (appendopts.classes);}
Lnk.data (' page_id ', page_id);
return lnk;
},
Generate a range of numeric links
Appendrange:function (container, current_page, start, end, opts) {
var i;
for (I=start; i<end; i++) {
This.createlink (i, Current_page, opts). AppendTo (container);
}
},
Getlinks:function (Current_page, eventhandler,psize) {
var $page = this;
var begin, end,
Interval = This.pc.getInterval (current_page),
NP = This.pc.numPages (),
Fragment = $ ("<div class= ' pagination ' ></div>");
if (Isnotempty (psize)) NP = Math.ceil (this.maxentries/psize);
Generate "Previous"-link
if (This.opts.prev_text && (current_page > 0 | | this.opts.prev_show_always)) {
Fragment.append (This.createlink (current_page-1, Current_page, {text:this.opts.prev_text, classes: "Prev"}));
}
Generate Starting points
if (Interval.start > 0 && this.opts.num_edge_entries > 0)
{
End = Math.min (this.opts.num_edge_entries, Interval.start);
This.appendrange (fragment, Current_page, 0, end, {classes: ' SP '});
if (This.opts.num_edge_entries < Interval.start && This.opts.ellipse_text)
{
JQuery ("<span>" +this.opts.ellipse_text+ "</span>"). AppendTo (fragment);
}
}
Generate interval Links
This.appendrange (fragment, Current_page, Interval.start, interval.end);
Generate ending points
if (Interval.end < NP && this.opts.num_edge_entries > 0)
{
if (np-this.opts.num_edge_entries > Interval.end && this.opts.ellipse_text)
{
JQuery ("<span>" +this.opts.ellipse_text+ "</span>"). AppendTo (fragment);
}
Begin = Math.max (np-this.opts.num_edge_entries, interval.end);
This.appendrange (fragment, Current_page, Begin, NP, {classes: ' EP '});

}
Generate "Next"-link
if (This.opts.next_text && (Current_page < np-1 | | this.opts.next_show_always)) {
Fragment.append (This.createlink (current_page+1, Current_page, {text:this.opts.next_text, classes: "Next"}));
}
$ (' A ', fragment). Click (EventHandler);
var psize = (current_page+1);
var Proxyszie = (psize>=this.maxentries)? This.maxentries:psize;
if (this.opts.showSelect) fragment.append ("<select class= ' tm_psize_go ' ><option value= ' >10</' Option><option value= ' >12</option><option value= ' >15</option><option value= ' ' >20</option><option value= ' >30</option><option value= ' >40</option>< Option value= ' >50</option></select>&nbsp; ');
if (this.opts.showGo) fragment.append ("<a href= ' javascript:void (0); ' style= ' float:left; ' > Total <label class= ' tmui_page_itemcount ' > ' +this.maxentries+ ' </label> strips </a>&nbsp;<a href= ' Javascript:void (0); ' title= ' Please enter another page number ' style= ' class= ' tm_go ' >go</a><input type= ' text ' title= ' Please enter another page number ' class= ' tm_number ' value= ' "+proxyszie+" ' id= ' Tm_pagego '/> ');
return fragment;

}
});

Extend JQuery
$.fn.pagination = function (MaxEntries, opts) {
Initialize options with default values
opts = Jquery.extend ({
Items_per_page:5,
Num_display_entries:11,
current_page:0,
num_edge_entries:0,
Link_to: "javascript:void (0)",
Prev_text: "Previous Page",
Next_text: "Next Page",
Ellipse_text: "...",
Prev_show_always:true,
Next_show_always:true,
Renderer: "Defaultrenderer",
Load_first_page:false,
Showgo:true,
Showselect:true,
Callback:function () {return false;},
Goback:function () {

}
},opts| | {});

var containers = this,
Renderer, links, current_page;

/**
* This is the event handling function for the pagination links.
* @param {int} page_id the new page number
*/
function Paginationclickhandler (evt) {
var links,
New_current_page = $ (evt.target). Data (' page_id '),
Continuepropagation = Selectpage (new_current_page);
if (!continuepropagation) {
Evt.stoppropagation ();
}
return continuepropagation;
}

/**
* This was a utility function for the internal event handlers.
* It Sets the new current page on the Pagination container objects,
* Generates a new HTMl fragment for the pagination links and calls
* The callback function.
*/
function Selectpage (new_current_page) {
Update the link display of a all containers
Containers.data (' Current_page ', new_current_page);
Links = renderer.getlinks (new_current_page, Paginationclickhandler);
Containers.empty ();
Links.appendto (containers);
$ (". Tm_number"). attr ("title", "Please enter a number ..."). On ("KeyDown",
Function (e) {
Return Tm_numberkey ($ (this), e);
});
Call the callback and propagate the event if it does not return false
var continuepropagation = Opts.callback (new_current_page,opts.items_per_page,containers);
Init ();
return continuepropagation;
}

function Selectpage_psize (new_current_page,psize) {
Update the link display of a all containers
Containers.data (' Current_page ', new_current_page);
Links = renderer.getlinks (new_current_page, paginationclickhandler,psize);
Containers.empty ();
Links.appendto (containers);
Containers.find (". Tm_psize_go"). Find ("option[value= '" +psize+ "']"). attr ("selected", true);
$ (". Tm_number"). attr ("title", "Please enter a number ..."). On ("KeyDown",
Function (e) {
Return Tm_numberkey ($ (this), e);
});
Call the callback and propagate the event if it does not return false
var continuepropagation = Opts.callback (new_current_page,psize, containers);
Init ();
return continuepropagation;
}

// -----------------------------------
Initialize containers
// -----------------------------------
Current_page = Opts.current_page;
Containers.data (' Current_page ', current_page);
Create a sane value for maxentries and Items_per_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;
if (!$. Paginationrenderers[opts.renderer])
{
throw new Referenceerror ("pagination renderer" + opts.renderer + "' is not found in Jquery.paginationrenderers object.") );
}
Renderer = new $. Paginationrenderers[opts.renderer] (maxentries, opts);

Attach control events to the DOM elements
var pc = new $. Paginationcalculator (MaxEntries, opts);
var np = Pc.numpages ();
if (np==0 | | np==1) {
Containers.hide ();
}else{
Containers.show ();
}
Containers.bind (' Setpage ', {NUMPAGES:NP}, function (EVT, page_id) {
if (page_id >= 0 && page_id < evt.data.numPages) {
Selectpage (page_id); return false;
}
});
Containers.bind (' PrevPage ', function (evt) {
var current_page = $ (this). Data (' Current_page ');
if (Current_page > 0) {
Selectpage (current_page-1);
}
return false;
});
Containers.bind (' NextPage ', {NUMPAGES:NP}, function (EVT) {
var current_page = $ (this). Data (' Current_page ');
if (Current_page < evt.data.numpages-1) {
Selectpage (current_page + 1);
}
return false;
});

When all initialisation are done, draw the links
Links = renderer.getlinks (current_page, Paginationclickhandler);
Containers.empty ();
Links.appendto (containers);
Call callback function
if (opts.load_first_page) {
Opts.callback (current_page, containers);
}

Init ();
function init () {
Containers.find (". Tm_psize_go"). Find ("option[value= '" +opts.items_per_page+ "']"). attr ("selected", true);
$ ('. Tm_go ', containers). On ("click", Function (e) {
var gopage = $ ("#tm_pagego"). Val ();
var current_page = containers.data (' current_page ');
if (Isnotempty (gopage) &&!isnan (gopage)) {
if (GOPAGE&GT;NP) return;
var pno = goPage-1;
if (pno = = current_page) return;
if (gopage==0) {
$ ("#tm_pagego"). Val (1);
pno = 0;
}

if (GOPAGE&GT;NP) {
$ ("#tm_pagego"). Val (np-1);
pno = np-1;
}
Selectpage (pno);
}else{
$ ("#tm_pagego"). focus ();
}
Stopbubble (e);
});

$ ('. Tm_psize_go ', containers). On ("Change", function (e) {
var pageSize = $ (this). Val ();
Opts.items_per_page = pageSize;
Selectpage_psize (0,pagesize);
});

$ (". Tm_number"). attr ("title", "Please enter a number ..."). On ("KeyDown",
Function (e) {
Return Tm_numberkey ($ (this), e);
});
}
}//End of $.fn.pagination block

}) (JQuery);

Introduce styles

/* Paging */
. pagination {
font-size:12px;
margin-left:30px;
Display:block;
margin-top:20px;
padding-bottom:30px;
}

. pagination a {
Text-decoration:none;
Border:solid 1px #ccc;
Color: #999;
}

. Pagination A,.pagination Span {
Display:block;
Float:left;
Padding:0.3em 0.5em;
margin-right:5px;
margin-bottom:5px;
Min-width:1em;
Text-align:center;
}

. Pagination. Current {
Background: #999;
Color: #fff;
Border:solid 1px #ccc;
}

. Pagination. current.prev,.pagination. current.next {
Color: #999;
Border-color: #999;
Background: #fff;
}

. tm_psize_go {
padding:5px;
margin-right:4px;
Float:left;
height:32px;
line-height:32px;
position:relative;
border:1px solid #ccc;
}

#tm_pagego {
height:31px;
line-height:31px;
width:30px;
Float:left;
Text-align:center;
border:1px solid #ccc;
}

. btnsi {
margin-left:15px;
}

. namedd{
width:200px;
}

Paging initialization

function Tm_init_page () {
$ ("#paged"). Pagination (ItemCount, {
Num_display_entries:3,//main pages
num_edge_entries:4,//Edge Pages
current_page:0,//indicates that the page number is selected
Items_per_page:10,//show how many bars per page
Prev_text: "Home",
Next_text: "Last",
showgo:true/false,//Display
Showselect:false/true,
Callback:function (PageNo, psize) {//will return two parameters one current page, number of pages displayed

Write a Load data function
}
});
};

Java Imitation Baidu page