[转]jQuery AJAX pagination plugin with ASP.NET Server Side

本文转自：http://do-web.com/jpaging/usage

How does it work?

1. In order to implement the plugin, you need to insert inside the head tag of your document the last jQuery file, jquery.jpaging.0.1.min.js and jpaging.css.

<scripttype="text/javascript"language="javascript"src="js/jquery-1.5.2.min.js"></script>

<scripttype="text/javascript"language="javascript"src="js/jquery.jpaging.0.1.min.js"></script>

<linkhref="css/jpaging.css"rel="stylesheet"type="text/css"/>

2. Next you need to insert your html markup into the body tag.

<divid="paging"></div>

3. Create your 'get' function that will select items from database.

function get_data(start_index, end_index){

$.ajax({

type:"POST",

url:'serverpage.aspx',

data:{start_index: start_index,

end_index: end_index},

success:function(data)

{

//create your html

}

});

}

4. Get the total number of items from database and call jPaging plugin.

$.ajax({type:"POST",

url:'serverpage.aspx',

success:function(total)

{

$("#paging").jpaging({

all_items_num: total,

callback: get_data

});

}

});

Example

HTML murkup:

<divid="paging">

<imgsrc=preloader.gif" border="0" alt="" title=""/>

</div>

<divid="demo_tbl">

<imgsrc=preloader.gif" border="0" alt="" title=""/>

</div>

JavaScript:

$("document").ready(function()

{

var items_on_page =5;

var pages_step =5;

function get_data(start_index, end_index){

$.ajax({

type:"POST",

url:"plugins.ashx",

data:{start_index: start_index,

end_index: end_index,

type:"get"},

success:function(html)

{

$("#demo_tbl").html(html);

}

});

}

get_data(1, items_on_page);

$.ajax({

type:"POST",

url:"plugins.ashx",

data:{type:"total"},

success:function(total)

{

$("#paging").jpaging({

all_items_num: total,

callback: get_data,

items_on_page: items_on_page,

pages_step: pages_step

});

}

});

});

Handler class example:

publicclassPluginsHandler:IHttpHandler{

privateDataBase db;

private string type;

publicvoidProcessRequest(HttpContext context)

{

context.Response.ContentType="text/plain";

this.db =newDataBase();

try{

this.type = context.Request.Form["type"];

if(this.type !=""){

switch(this.type){

case"get":{

context.Response.Write(this.Get(context));

break;

}

case"total":{

context.Response.Write(this.db.CountPlugins());

break;

}

}

}

}

catch(Exception ex){

context.Response.Write(ex.Message.ToString()+" "+ ex.StackTrace);

}

}

publicboolIsReusable

{

get {returntrue;}

}

public string Get(HttpContext context){

StringBuilder html =newStringBuilder();

int start_index_int, end_index_int;

bool start_index_num, end_index_num;

string start_index = context.Request.Form["start_index"];

string end_index = context.Request.Form["end_index"];

int count =0;

start_index_num =Int32.TryParse(start_index, out start_index_int);

end_index_num =Int32.TryParse(end_index, out end_index_int);

if(start_index_num && end_index_num){

List plugins =this.db.GetPlugins(start_index_int, end_index_int);

html.AppendLine("<table border='1' cellspacing='0' cellpadding='0' align='center'>");

html.AppendLine("<th width='33%'>Plugin title</th>");

html.AppendLine("<th width='33%'>Description</th>");

html.AppendLine("<th width='33%'>Website</th>");

foreach(Plugin plugin in plugins){

html.AppendLine(this.GetRow(plugin, count));

count++;

}

html.AppendLine("</table>");

}

return html.ToString();

}

public string GetRow(Plugin plugin,int count){

StringBuilder html =newStringBuilder();

string class_name ="odd";

if(count %2==0){

class_name ="even";

}

html.AppendLine("<tr class='"+ class_name +"'>");

html.AppendLine("<td>"+ plugin.Title+"</td>");

html.AppendLine("<td>"+ plugin.Description+"</td>");

html.AppendLine("<td>"+ plugin.Website+"</td>");

html.AppendLine("</tr>");

return html.ToString();

}

}