本文转自: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();
- }
- }