jquery plugin pagination implementation without refreshing paging _jquery

This article we mainly look at the simple use of jquery pagination this plug-in to achieve no refresh paging, the use of jquery pagination main role in the paging style display, without the main principle of refreshing or using AJAX, specifically see below:

First, we introduce jquery files, jquery pagination files, and jquery templates files.

<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></ script> 
<script src= "http://www.jquery001.com/js/jquery.tmpl.js" type= "Text/javascript" ></script > 
<script src= "http://www.jquery001.com/js/jquery.pagination.js" type= "Text/javascript" ></script > 

Next, take a look at the HTML tags, which are used to render the data item and the paging style display, as follows:

<!--display list--> 
<div id= "Content-left" ></div> 
<!--pagination style display--> <div id= 
" Pagination "class=" pagination "></div> 
<!--jQuery templates--> 
<script id=" Template "type = "text/html" > 
<div class= "Item" > 
   
 

We need to get the data below, and if you look at the first two jquery templates, you realize that we need to return the JavaScript object to bind the data, and here we return to JSON. Basically, the following JSON structure is ultimately returned in the form of a puzzle:

var req={ 
    "articlelist": 
    [ 
      {"title": "Article Heading 1", "URL": "Article Url1", "Subject": "Article overview 1"}, 
      {"title": " Article title 2 ", url": "Article Url2", "Subject": "Article Overview 2"}, 
      {"title": "Article title 3", "url": "Article Url3", "Subject": "Article overview 3"} 
    ] 
  }; 

For the convenience of a lot of new learning JSON friends, here are some C # code that gives a point of the background output JSON, as follows:

if (dt!= null && dt. Rows.Count > 0) 
{ 
  StringBuilder strresult = new StringBuilder (); 
  Strresult.append ("{\" articlelist\ ": ["); 
  foreach (DataRow dr in Dt. Rows) 
  { 
    strresult.append ("{\" title\ ": \" "+ dr[" Title "]. ToString () + "\", "); 
    Strresult.append ("\" url\ ": \" "+ dr[" URL "]. ToString () + "\", "); 
    Strresult.append ("\" subject\ ": \" "+ dr[" Subject "]. ToString () + "\"}, "); 
  } 
  Removing the end ', ' 
  strresult.remove (strresult.length-1, 1); 
  Strresult.append ("]}"); 
  Output JSON 
  Response.Write (strresult.tostring ()); 
  Response.End (); 
} 

About JSON this site has been mentioned many times, if there are not understand can look for. So when we use "articlelist", it is the equivalent of an array of objects, making it easy to bind data. Below is the foreground code:

$ (document). Ready (function () { 
  //totalnum total is here written dead 
  var totalnum =; 
  First load 
  pageselectcallback (0); 
  Paging Event 
  $ ("#Pagination"). Pagination ({ 
    prev_text: "prev", 
    next_text: "Next page", 
    Num_edge_entries:2, 
    num_display_entries:8, 
    //callback 
    Callback:pageselectcallback 
  }); 
 
  function Pageselectcallback (page) { 
    var result = ""; 
    $.ajax ({ 
      type: "Post", 
      DataType: "json", 
      URL: "getdata.aspx",//Request URL 
      data: {"page": parseint ( Page + 1)}, 
      success:function (req) { 
        //using Microsoft jquery templates to bind the data list to achieve HTML and JS separation, make the page neat 
        $ ("# Content-left "). HTML ($ (" #Template "). Render (Req.articlelist)); 
 

In this way, we use jquery pagination implementation of the No refresh paging, the article does not introduce a lot of jquery pagination, but will focus on the use of jquery templates, but also hope to have some help.