jquery Small Paging plugin, similar to Aspnetpager usage

1/*
2--=============================================
3--Author: <yyliuliang@gmail.com>
4--Create Date: <2008-12>
5--=============================================
6 */
7 (function ($) {
8
9 $.fn.pager = function (RecordCount, options) {
10
One var defaults = {
12//Only one page is still displayed
Alwaysshow:true,
Width: ' 95% ',
Currentpageindex:1,
Pagesize:10,
//button or number
PagerStyle: ' button ',
Onpageindexchanged:function () {}
20};
var parent = this;
var props = $.extend (defaults, options);
The var PageCount = Math.ceil ((recordcount/props.pagesize));
24
25//When the data is not a page, whether show pager
if (RecordCount > Props.pagesize | | props.alwaysshow) {
var text = "<table width= '" + props.width + "' ><tr><td align= ' left ' >";
28
Text + = ' record number: ' + recordCount + ' page: ' + props.currentpageindex + '/' + PageCount + ' per page ' + props.pagesize + "article";
Text + "</td><td align= ' right ' >";
-if (Props.pagerstyle = = ' button ') {
Text + + "<a id= ' Pagerfirst ' > Home </a>";
Text + + <a id= ' Pagerprev ' > prev </a>;
-text + + "<a id= ' pagernext ' > next page </a>";
Text + + <a id= ' pagerlast ' > Last </a>;
36}
37
if (Props.pagerstyle = = = ' number ') {
///todo
40}
41
<input + id= ' pagernumber ' style= ' width:18px;font-size:11px '/><input type= ' button ' value= ' G O ' style= ' width:22px;font-size:11px ' id= ' Pagerbutton '/> ';
Text + + "</td></tr></table>";
44
this.html (text);
46
$ (' #pagernumber '). Val (Props.currentpageindex);
48
49
$ (' #pagerbutton '). Click (function () {
Wuyi var i = $ (' #pagernumber '). Val ();
if (I < 1 | | | i > PageCount | |!/^\d+$/.test (i)) {
Alert (' Please enter the correct number of pages ');
The return false;
55}
Props.currentpageindex = i;
Raisepageindexchangedevent (i);
58});
59
if (Props.currentpageindex > 1) {
61
$ (' #pagerfirst '). attr (' href ', ' javascript:void (0); '). Click (function () {
Raisepageindexchangedevent (1);
64});
65
$ (' #pagerprev '). attr (' href ', ' javascript:void (0); '). Click (function () {
Raisepageindexchangedevent (--props.currentpageindex);
68});
69}
Or else {
$ (' #pagerfirst '). css ({' Color ': ' Gray ', ' text-decoration ': ' None '});
$ (' #pagerprev '). css ({' Color ': ' Gray ', ' text-decoration ': ' None '});
73}
74
if (Props.currentpageindex < PageCount) {
$ (' #pagernext '). attr (' href ', ' javascript:void (0); '). Click (function () {
Raisepageindexchangedevent (++props.currentpageindex);
78});
79
$ (' #pagerlast '). attr (' href ', ' javascript:void (0); '). Click (function () {
Bayi raisepageindexchangedevent (PageCount);
82});
83}
Or else {
$ (' #pagernext '). css ({' Color ': ' Gray ', ' text-decoration ': ' None '});
$ (' #pagerlast '). css ({' Color ': ' Gray ', ' text-decoration ': ' None '});
87}
88
89}
90
The Render function () {
92}
93
94
The function raisepageindexchangedevent (pageIndex) {
Props.onpageindexchanged (PageIndex);
97}
98};
99
}) (JQuery);

Landscaping aspects of the basic did not do, you can change their own

This article supporting source code