jquery pagination plugin implementation without refreshing paging code _jquery

First, enter the file you want to use in turn:

Copy Code code as follows:

<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 in the body of the page to write the following code, here to emphasize that the presented data is not bound by the control, is entirely by a simple table to render the data, first look at the page code

Copy Code code as follows:

<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 price
</th>
</tr>
</thead>
</table>
</div>
<div id= "pagination" class= "Digg" ></div>

Let's analyze the code first, it's obvious that we've set a standard <thead> table and then added the jquery plugin-paination we use, where we just need to define a layer with an ID of pagination. The Code of the page we analyze here, let's take a look at the key JS code

Copy Code code as follows:

<script language= "javascript" type= "Text/javascript" >
var by = ""; The basis for sorting
$ (document). Ready (function () {
InitData (0); Initializing data
});
The event was used when the page was turning.
function Pageselectcallback (page_id, JQ) {
InitData (page_id);
}
function InitData (pageIndex) {
var tbody = ""; Declare the body part of a table
$.ajax ({//The Ajax method used here to jquery, specifically used here is not described in detail
Type: "POST",
DataType: "JSON",
URL: '/datalistweb/webservice/getdata.ashx ',//requested processing data
Data: "pageindex=" + (PageIndex + 1) + "&sorttype=" + by,
The argument passed in, the first parameter is the number of pages in the page, and the second argument is the basis for sorting
The following operation is to bind 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);
}
});
Join a page-binding
$ ("#Pagination"). Pagination (<%=pagecount%>, {
Callback:pageselectcallback,
Prev_text: ' < prev ',
Next_text: ' next page > ',
ITEMS_PER_PAGE:20,
Num_display_entries:6,
Current_page:pageindex,
Num_edge_entries:2
});
}
</script>

So our page to do the operation is completed, comments are written above, if there is nothing to understand, you can contact me oh. I'm going to take a look at the key getdata.ashx how to do data manipulation, first of all, I used the SqlHelper class for SQL statement operations, supplemented by paging stored procedures, and then use the Json.NET, the data from the database into JSON, now found that JSON is really A good thing, it is easier to operate. Not much nonsense to say the code, the code is still persuasive. Although it is easier to write.

Copy Code code as follows:

String strconn = configurationmanager.appsettings["ConnectionString"];
Specific number of pages
int pageIndex;
Int. TryParse (context. request["PageIndex"], out pageIndex);
The basis of the sort
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 of the stored procedures, the corresponding parameters can be passed 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 ());
Converts the resulting data into JSON
Context. Response.Write (Util.datatabletojson (DT, "products", PageCount));
Let's take a look at Datatabletojson This method code, this is relatively simple, I also look at its help to write the document, the code detailed instructions will not say.

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 Property
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 ();
}

So our work is basically done, declare the binding table, and then get the data on the server, and then convert the resulting data into JSON, the page inside the data binding to complete, coherent is really good, look at the data presented in the heart is more beautiful, but this time you may find that the page how to use only one page? , Hee, don't forget a little---is to take out the total number of data, with excessive page know, is based on the total number of records to calculate how many pages oh. So what do we do?

In fact, relatively simple oh, the page in the Page_Load to get the total number of data can be, and then data binding, do not believe you go to see the previous code, is not a sentence

Copy Code code as follows:

$ ("#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, the whole article introduces how to use jquery plug-in---pagination to do pagination on this, a simple review is to declare the binding table, using the Ajax method of jquery data binding, and then in the background to get data converted to JSON, The whole process is like this, perhaps you will find this more cumbersome, I do not know what you have to say, you can in the following comments for me to point out, I am grateful oh. ^_^. Blogging is really a very demanding thing, but in the process of writing, and let themselves consolidate the knowledge, is also very good. Please reader comments.

After consulting the art, the page pagination effect made of GIF pictures, we look at the picture bar.