The pagination plug-in of jquery implements refreshing pagination

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 following code in the page body. Here, we emphasize that the data presented is not bound to the control, and the data is completely presented by a simple table, let's take a look at the page code.

<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 "> product 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 the function pageselectcallback (page_id, JQ ){
Initdata (page_id );
}
Function initdata (pageindex ){
VaR tbody = ""; // declare the body section in the table $. ajax ({// here the Ajax method of jquery is used. The specific usage here does not detail type: "Post ",
Datatype: "JSON ",
URL: '/datalistweb/WebService/getdata. ashx', // the data processed by the request: "pageindex =" + (pageindex + 1) + "& 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 successful return. 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 );
}
});
// Add the pagination binding $ ("# 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. etettings ["connectionstring"];
// The specific page count int pageindex;
Int. tryparse (context. request ["pageindex"], out pageindex );
// Sort by 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", SQL dbtype. 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 jsoncontext. 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 DC in 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 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.