Use the pagination plug-in jquery to implement refreshing pagination

Recently, some members in the group asked questions about the non-Refresh page. It happened that this feature was implemented some time ago, and some special functions were added on this basis, such as filtering and sorting. However, this is not involved today. Let's start with simple paging.

First, we need to prepare the following files: jquery.js, jquery.pagination.js, pagination.css, and a CSS file that is frequently used for table layout. These files will be included in the following files.

First, enter the files to be used in order:

 <  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"   /> 

Then write the followingCodeHere, we emphasize that the rendered data is not bound with controls, and is completely rendered by a simple table. Let's take a look at the page code first.

 <  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 ;"   > Product Name </ Th  >  <  Th   Style = "Width: 200px; text-align: Center"  > Unit Price </  Th  >  </  Tr  >  </  Thead  >  </ Table  >  </  Div  >  <  Div   ID = "Pagination"   Class = "Digg"  >  </  Div  >
 

First, let's analyze the code. Obviously, we have set a standard table with <thead>, and then added the jquery plug-in-paination we used, here we only need to define a layer with ID as pagination. The page code is analyzed here. The following describes the key JS Code.

<Script language =" Javascript "Type =" Text/JavaScript ">
 VaR Orderby ="  "; // The basis for sorting $ ( Document ). Ready ( Function (){
Initdata (0 ); // Initialize data }); // This event is used during page flip Function Pageselectcallback (page_id, JQ ){
Initdata (page_id );
}
 Function Initdata (pageindex ){
 VaR Tbody ="  "; // Declare the body part of the table $. Ajax ({ // The Ajax method of jquery is used here. The usage is not described in detail here. Type :" Post ",
Datatype :" JSON ",
URL: '/datalistweb/WebService/getdata. ashx ', // Request processing data Data :" Pageindex = "+ (Pageindex + 1) +" & Amp; sorttype = "+ Orderby,

  // Input parameter. The first parameter is the page number, and the second parameter is the basis for sorting.  // The following Operation binds the data after the data is successfully returned. 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 );
}
});
 // Bind to the page $ (" # Pagination "). Pagination (<% = pagecount %> ,{
Callback: pageselectcallback,
Prev_text: '<Previous Page ',
Next_text: 'Next page> ',
Items_per_page: 20,
Num_display_entries: 6,
Current_page: pageindex,
Num_edge_entries: 2
});
}
</SCRIPT>

In this way, all the operations on the page will be completed, and all the comments will be written above. If you cannot understand anything, contact me. Next, let's take a look at the key getdata. how does ashx perform data operations? Here, I will first remind you that I used the sqlhelper class for SQL statement operations, supplemented by paging stored procedures, and then used JSON. net, which converts the data obtained from the database to JSON. Now we find that JSON is really good and easy to operate. If you don't talk much about the code, the code is still persuasive. Although it is relatively simple to write.

 String Strconn = configurationmanager. receivettings [" Connectionstring "];
 // Page count  Int Pageindex;
Int . Tryparse (context. request [" Pageindex "], Out Pageindex );
 // Sorting basis  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;
}
 // The following is the paging storage process. You can pass the corresponding parameters in. System. Data. sqlclient. sqlparameter [] P = {sqlhelper. makeoutparam ("@ Counts ", Sqldbtype. Int, 4 ),
Sqlhelper. makeinparam (" @ Tblname ", Sqldbtype. varchar, 128 ," Products "),
Sqlhelper. makeinparam (" @ Strgetfields ", Sqldbtype. varchar, 200 ," Productname, quantityperunit "),
Sqlhelper. makeinparam (" @ Fldname ", Sqldbtype. varchar, 128, ordertype ),
Sqlhelper. makeinparam (" @ Pagesize ", Sqldbtype. Int, 4, 20 ),
Sqlhelper. makeinparam ("@ Pageindex ", Sqldbtype. Int, 1, pageindex ),
Sqlhelper. makeinparam (" @ Ordertype ", Sqldbtype. Bit, 1, sorttype ),
Sqlhelper. makeinparam (" @ Strwhere ", Sqldbtype. varchar, 1500 ,"  ")
};
Datatable dt = sqlhelper. executedataset (strconn, commandtype. storedprocedure ," Sp_pagecut ", P). Tables [0];
 Int Pagecount = convert. toint32 (P [0]. value. tostring ());
 // Convert the obtained data to JSON Context. response. Write (util. datatabletojson (DT ," Products ", Pagecount ));

Next, let's take a look at the code of datatabletojson, which is relatively simple. I also read the help documentation of datatabletojson. The detailed description of the Code will not be mentioned.

  Public   Static   String Datatabletojson (datatable DT, String Tablename, Int Pagecount)
{
Stringbuilder sb = New Stringbuilder ();
Stringwriter Sw = New Stringwriter (SB );
Using (Jsonwriter JW = New Jsontextwriter (SW ))
{
Jsonserializer SER = New Jsonserializer ();
JW. writestartobject ();
JW. writepropertyname (tablename );
JW. writestartarray ();
# Region tablename attributes
 Foreach (Datarow Dr In DT. Rows)
{
JW. writestartobject ();
 Foreach (Datacolumn DCIn DT. columns)
{
JW. writepropertyname (DC. columnname );
Ser. serialize (JW, Dr [DC]. tostring ());
}
JW. writeendobject ();
}
# Endregion
JW. writeendarray ();
JW. writeendobject ();
Sw. Close ();
JW. Close ();
}
 Return SB. tostring ();
}

In this way, our work is basically complete. Declare the bound table, then obtain data on the server side, convert the data to JSON, and complete the data binding on the page, it's really nice to see the data in one breath. But you may find that how to use only one page on the page? Hey, don't forget that it's the total number of data retrieved, all those who have used paging know how many pages there are based on the total number of records. So what should we do?

In fact, it is relatively simple. You can get the total number of data in page_load on the page, and then bind the data. If you don't believe it, check the previous Code. Is there a sentence?

$ ("# Pagination"). pagination ( <% = Pagecount %> This is the role of the total number of records.
 If (! Ispostback)
{
Sqlparameter [] P =
{
Sqlhelper. makeoutparam (" @ Counts ", Sqldbtype. Int, 4 ),
Sqlhelper. makeinparam (" @ Tblname ", Sqldbtype. varchar, 128 ," Products "),
Sqlhelper. makeinparam (" @ Strgetfields ", Sqldbtype. varchar, 200 ," * "),
Sqlhelper. makeinparam (" @ Fldname ", Sqldbtype. varchar, 128 ," Productid "),
Sqlhelper. makeinparam (" @ Pagesize ", Sqldbtype. Int, 4, 20 ),
Sqlhelper. makeinparam (" @ Pageindex ", Sqldbtype. Int, 1, 1 ),
Sqlhelper. makeinparam (" @ Ordertype ", Sqldbtype. Bit, 1, 0 ),
Sqlhelper. makeinparam ("@ Strwhere ", Sqldbtype. varchar, 1500 ,"  ")
};
Datatable dt = sqlhelper. executedataset (Conn, commandtype. storedprocedure ," Sp_pagecut ", P). Tables [0];
Pagecount = convert. toint32 (P [0]. value. tostring ());
}

So far, this article describes how to use the jquery plug-in pagination for paging. A brief review is to declare the bound table and use the Ajax method of jquery to bind data, then, you can get the data converted to JSON in the background. The whole process is like this. You may think this is complicated. If you don't know what you think, you can click here for me, I am very grateful. ^_^. Writing a blog is really a very difficult task, but it is also good to let yourself consolidate this knowledge in the process of writing. For more information, see the official comments.

After consulting the artist, I made the effect of pagination on the page into a GIF image. Let's take a look at the figure.