插件官方地址：

 插件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:

"

#

"

,

prev_text:

"

Prev

"

,

next_text:

"

Next

"

,

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);

}

//

产生"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

"

});

}

}

//

从选项中提取current_page

var

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

);

});

}

 

 分页插件参数说明：

参数名	描述	参数值
maxentries	总条目数	必选参数，整数
items_per_page	每页显示的条目数	可选参数，默认是10
num_display_entries	连续分页主体部分显示的分页条目数	可选参数，默认是10
current_page	当前选中的页面	可选参数，默认是0，表示第1页
num_edge_entries	两侧显示的首尾分页的条目数	可选参数，默认是0
link_to	分页的链接	字符串，可选参数，默认是"#"
prev_text	“前一页”分页按钮上显示的文字	字符串参数，可选，默认是"Prev"
next_text	“下一页”分页按钮上显示的文字	字符串参数，可选，默认是"Next"
ellipse_text	省略的页数用什么文字表示	可选字符串参数，默认是"…"
prev_show_always	是否显示“前一页”分页按钮	布尔型，可选参数，默认为true，即显示“前一页”按钮
next_show_always	是否显示“下一页”分页按钮	布尔型，可选参数，默认为true，即显示“下一页”按钮
callback	回调函数	当点击链接的时候此函数被调用，此函数接受两个参数，新一页的id和pagination容器（一个DOM元素）。如果回调函数返回false，则pagination事件停止执行

 

 

demo

html代码

 

 

<

script

src

="common/jquery.js"

type

="text/javascript"

></

script

>

<

script

src

="common/jquery.pagination.js"

type

="text/javascript"

></

script

>

<

link

href

="common/tablesorter.css"

rel

="stylesheet"

type

="text/css"

/>

<

link

href

="common/pagination.css"

rel

="stylesheet"

type

="text/css"

/>

<

script

language

="javascript"

type

="text/javascript"

>

var

orderby

=

""

;

//

进行排序的依据

$(document).ready(

function

() {

InitData(

0

);

//

初始化数据

});

//

这个事件是在翻页时候用的

function

pageselectCallback(page_id, jq) {

InitData(page_id);

}

function

InitData(pageIndex) {

var

tbody

=

""

;

//

声明表格中body部分

$.ajax({

//

这里使用到Jquery的ajax方法

type:

"

POST

"

,

dataType:

"

json

"

,

url:

'

GetData.ashx

'

,

//

请求的处理数据

data:

"

pageIndex=

"

+

(pageIndex

+

1

)

+

"

&sortType=

"

+

orderby,

//

传入的参数，第一个参数就是分页的页数，第二个参数为排序的依据

//

下面的操作就是成功返回数据以后，进行数据的绑定

success:

function

(data) {

$(

"

#linkTable tr:gt(0)

"

).remove();

var

myData

=

data.Products;

$.each(myData,

function

(i, n) {

var

trs

=

""

;

trs

+=

"

<tr><td align='center'>

"

+

n.ProductName

+

"

</td><td>

"

+

n.QuantityPerUnit

+

"

</td></tr>

"

;

tbody

+=

trs;

});

$(

"

#linkTable

"

).append(tbody);

}

});

//

加入分页的绑定

$(

"

#Pagination

"

).pagination(

<%=

pageCount

%>

, {

callback: pageselectCallback,

prev_text:

'

< 上一页

'

,

next_text:

'

下一页 >

'

,

items_per_page:

20

,

num_display_entries:

6

,

current_page: pageIndex,

num_edge_entries:

2

});

}

</

script

>

<

div

>

<

table

id

="linkTable"

cellpadding

="6"

cellspacing

="1"

align

="left"

class

="tablesorter"

style

="width:400px;margin:0 0 20px 5px;"

>

<

thead

>

<

tr

class

="tableHeader"

align

="center"

>

<

th

style

="width:200px; text-align:center;"

>

产品名称

</

th

>

<

th

style

="width:200px; text-align:center"

>

产品单价

</

th

>

</

tr

>

</

thead

>

</

table

>

</

div

>

<

div

id

="Pagination"

class

="digg"

></

div

>

 

 

 

后台处理代码GetData.ashx

     //具体的页面数

      int pageIndex;

      int.TryParse(context.Request["pageIndex"], out pageIndex);

      //排序的依据

      string orderType = "ProductID";

      int sortType = 1;

      if (!string.IsNullOrEmpty(context.Request["sortType"]))

      {

      string[] strArr = context.Request["sortType"].Split('_');

      if (strArr[1] == "0")

      {

      orderType = strArr[0];

      sortType = 0;

      }

      else

      {

      orderType = strArr[0];

      sortType = 1;

      }

      }

      if (pageIndex == 0)

      {

      pageIndex = 1;

      }

      //调用分页的存储过程了

       ……