For specific implementation, see the source code:
1. aspx page
Copy codeThe Code is as follows: <% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "AjaxPage. aspx. cs" Inherits = "MeasurementWellCurve. UI. AjaxPage" %>2. Specific implementation of JSCopy codeCode: var pageIndex = 1; // page index
Var where = "where 1 = 1 ";
$ (Function (){
BindData ();
// GetTotalCount (); // total number of records
// GetPageCount (); // bound to the total number of pages
// Click the button on the first page
$ ("# First"). click (function (){
PageIndex = 1;
$ ("# LblCurent"). text (1 );
BindData ();
});
// Click the previous page button event
$ ("# Previous"). click (function (){
If (pageIndex! = 1 ){
PageIndex --;
$ ("# LblCurent"). text (pageIndex );
}
BindData ();
});
// Next page button click event
$ ("# Next"). click (function (){
Var pageCount = parseInt ($ ("# lblPageCount"). text ());
If (pageIndex! = PageCount ){
PageIndex ++;
$ ("# LblCurent"). text (pageIndex );
}
BindData ();
});
// Button click event on the last page
$ ("# Last"). click (function (){
Var pageCount = parseInt ($ ("# lblPageCount"). text ());
PageIndex = pageCount;
BindData ();
});
// Query
$ ("# BtnSearch"). click (function (){
Where = "where 1 = 1 ";
Var csbh = $ ("# txtCSBH"). val ();
If (csbh! = Null & csbh! = NaN ){
PageIndex = 1;
Where + = "and csbh like '%" + csbh + "% '";
}
BindData ();
});
})
// Obtain data using the AJAX method and display it on the page
Function BindData (){
$. Ajax ({
Type: "get", // use the get method to access the background
DataType: "json", // return data in json format
Url: "../AjaxService/JgcsService. ashx", // The background address to be accessed
Data: {"pageIndex": pageIndex, "where": where}, // data to be sent
AjaxStart: function () {$ ("# load"). show ();},
Complete: function () {$ ("# load"). hide () ;}, // hide the loading prompt when the AJAX request is complete
Success: function (msg) {// msg is the returned data. Bind The data here.
Var data = msg. table;
If (data. length! = 0 ){
Var t = document. getElementById ("tb_body"); // obtain the table that displays the data.
While (t. rows. length! = 0 ){
T. removeChild (t. rows [0]); // If the table already exists when reading data, delete all rows.
}
}
$. Each (data, function (I, item ){
$ ("# JgcsTable "). append ("<tr> <td>" + item. CSBH + "</td> <td>" + item. K + "</td> <td>" + item. C +
"</Td> <td>" + item. S + "</td> <td>" + item. DSB + "</td> <td>" + item. TCBJ +
"</Td> <td>" + item. LHDCYL + "</td> <td>" + item. BJJL + "</td> <td>" + item. YLXS +
"</Td> <td>" + item. FCTH + "</td> <a href0000'ajaxpaging.htm' target = 'blank '>" +
"<Img src = '../images/icon_06.gif 'alt = 'view details'" +
"Id = 'btninsert' style = 'border-width: 0px; '/> </a> </td> </tr> ");
})
},
Error: function (){
Var t = document. getElementById ("tb_body"); // obtain the table that displays the data.
While (t. rows. length! = 0 ){
T. removeChild (t. rows [0]); // If the table already exists when reading data, delete all rows.
}
Alert ("failed to load data ");
} // Failed to load and request error handling
// AjaxStop: $ ("# load"). hide ()
});
GetTotalCount ();
GetPageCount ();
BindPager ();
}
// Footer attribute settings
Function bindPager (){
// Fill in the Distribution Control Information
Var pageCount = parseInt ($ ("# lblPageCount"). text (); // the total number of pages
If (pageCount = 0 ){
Document. getElementById ("lblCurent"). innerHTML = "0 ";
}
Else {
If (pageIndex> pageCount ){
$ ("# LblCurent"). text (1 );
}
Else {
$ ("# LblCurent"). text (pageIndex); // current page
}
}
Document. getElementById ("first"). disabled = (pageIndex = 1 | $ ("# lblCurent"). text () = "0 ")? True: false;
Document. getElementById ("previous"). disabled = (pageIndex <= 1 | $ ("# lblCurent"). text () = "0 ")? True: false;
Document. getElementById ("next"). disabled = (pageIndex> = pageCount )? True: false;
Document. getElementById ("last"). disabled = (pageIndex = pageCount | $ ("# lblCurent"). text () = "0 ")? True: false;
}
// Obtain the total number of pages using the AJAX Method
Function GetPageCount (){
Var pageCount;
$. Ajax ({
Type: "get ",
DataType: "text ",
Url: "../AjaxService/JgcsService. ashx ",
Data: {"wherePageCount": where}, // "wherePageCount" + where. This method is not recommended for individuals.
Async: false,
Success: function (msg ){
Document. getElementById ("lblPageCount"). innerHTML = msg;
}
});
}
// The total number of records obtained by the AJAX Method
Function GetTotalCount (){
Var pageCount;
$. Ajax ({
Type: "get ",
DataType: "text ",
Url: "../AjaxService/JgcsService. ashx ",
Data: {"whereCount": where },
Async: false,
Success: function (msg ){
Document. getElementById ("lblToatl"). innerHTML = msg;
}
});
}
3. Code in the general processing program ashxCopy codeThe Code is as follows: public class JgcsService: IHttpHandler
{
Readonly int pageSize = 15;
Public void ProcessRequest (HttpContext context)
{
Context. Response. ContentType = "text/plain ";
// Disable browser caching
Context. Response. Buffer = true;
Context. Response. ExpiresAbsolute = DateTime. Now. AddDays (-1 );
Context. Response. AddHeader ("pragma", "no-cache ");
Context. Response. AddHeader ("cache-control ","");
Context. Response. CacheControl = "no-cache ";
String result = "";
// The total number of records
If (! String. IsNullOrEmpty (context. Request ["whereCount"])
{
String where = context. Request. Params ["whereCount"]. ToString ();
Result = Jgcs. GetToatlNum (where). ToString ();
}
// Total number of pages
If (! String. IsNullOrEmpty (context. Request ["wherePageCount"])
{
String where = context. Request. Params ["wherePageCount"]. ToString ();
Int count = Jgcs. GetToatlNum (where );
String pageCount = Math. Ceiling (double) count/(double) pageSize). ToString ();
Result = pageCount;
}
// Paging data
If (! String. IsNullOrEmpty (context. Request. Params ["pageIndex"])
&&! String. IsNullOrEmpty (context. Request. Params ["where"])
{
String where = context. Request. Params ["where"]. ToString ();
Int pageIndex = Convert. ToInt32 (context. Request. Params ["pageIndex"]);
Result = GetJsonString (where, pageIndex );
}
Context. Response. Write (result );
}
/// <Summary>
/// Return a json string
/// </Summary>
/// <Param name = "where"> query condition </param>
/// <Param name = "pageIndex"> page index </param>
/// <Returns> json string </returns>
Protected string GetJsonString (string where, int pageIndex)
{
DataTable dt = Jgcs. GetInfo ("csbh", where, pageIndex, pageSize );
Return JsonHelper. DataTable2Json (dt, "table ");
}
Public bool IsReusable
{
Get
{
Return false;
}
}
}
4. You can skip the paging query method. Let's take a look at it. The example is a simple start, so do not write this in terms of processing the application, post it for only one reference
Paging MethodCopy codeThe Code is as follows: // <summary>
/// Paging Query Method
/// </Summary>
/// <Param name = "orderFile"> sort field </param>
/// <Param name = "where"> query condition </param>
/// <Param name = "pageNumber"> current page </param>
/// <Param name = "pageSize"> page size </param>
/// <Returns> </returns>
Public static DataTable GetInfo (string orderFile, string where, int pageNumber, int pageSize)
{
DBHelper db = new DBHelper ();
String str = @ "with TestInfo
(
Select row_number () over (order by {0} desc) as rowNumber, * from
(Select CSBH, K, C, S, DSB, TCBJ, LHDCYL, BJJL, BJLX, YLXS, FCTH, KHM1, KHM2, QKCS from YW_JGCS) temp {1}
)
Select * from TestInfo
Where rowNumber between ({2}-1) * {3} + 1) and {2} * {3 }";
String strSql = string. Format (str, orderFile, where, pageNumber, pageSize );
Try
{
Db. DBOpen ();
Return db. DbDataSet (strSql );
}
Catch (Exception ex)
{
Throw ex;
}
Finally
{
Db. DBClose ();
}
}
/// <Summary>
/// Total number of result Parameters
/// </Summary>
/// <Param name = "where"> </param>
/// <Returns> </returns>
Public static int GetToatlNum (string where)
{
DBHelper db = new DBHelper ();
String strSql = string. format (@ "select count (*) from (select CSBH, K, C, S, DSB, TCBJ, LHDCYL, BJJL, BJLX, YLXS, FCTH, KHM1, KHM2, QKCS from YW_JGCS) temp {0} ", where );
Try
{
Db. DBOpen ();
Return (int) db. ExecuteScalar (strSql );
}
Catch (Exception ex)
{
Throw ex;
}
Finally
{
Db. DBClose ();
}
}
Okay, there are so many codes.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
