Pagination plugin has no refreshed paging instances

Pagination plugin has no refreshed paging instances
The files we want to prepare are: jquery.js,jquery.pagination.js,pagination.css tutorials, and a CSS file that is often used as a table layout. These files will be included in the file that follows.

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

<script src= "Common/jquery.js" type= "text/Web Effects" ></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 body of the page, Here to emphasize that the presented data is not bound by the control, is entirely a simple table to render the data, first 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 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

<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 order,///incoming parameters, the first parameter is the page number of pagination, the second parameter is the basis of the sort
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 tutorial into JSON, now found JSON It's a good thing, it's easier to operate. Not much nonsense to say the code, the code is still persuasive. Although it is easier to write.

String strconn = Configurationmanager.apps Tutorial ettings["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 the code for Datatabletojson this method, which is relatively simple, I also read it in the Help document written out, 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.writestart Object ();
Jw.writepropertyname (tablename);
Jw.writestartarray ();
#region TableName Properties
foreach (DataRow dr in Dt.rows)
{
Jw.writestartobject ();
foreach (DataColumn dc i n 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 data binding in the page 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, hehe, 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

$ ("#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 ());
}