Introduction: The main function is pagination display data, you can configure the configuration file per page to display the page number, you can do a joint query, here is just a simple query. Welcome to the brick, there are problems also hope prawns are treatise ha. Look at this effect picture, no refresh of Oh!!
Specific implementation please see source code:
1. aspx page
Copy Code code as follows:
<%@ Page language= "C #" autoeventwireup= true "codebehind=" AjaxPage.aspx.cs "inherits=" MeasurementWellCurve.UI.AjaxPage "%>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>ajax Paging </title>
<link href= ". /css/tb_style.css "rel=" stylesheet "type=" Text/css "/>"
<script src= ". /js/jquery-1.4.2.min.js "type=" Text/javascript "></script>
<body>
<form id= "Form1" runat= "Server" >
<div id= "Divlayer" >
<div>
Item No: <asp:textbox id= "TXTCSBH" runat= "Server" ></asp:textbox><input "id=" btnsearch "button"
value= "Query"/>
</div>
<table id= "jgcstable" class= "listtable" cellpadding= "0" cellspacing= "0" >
<thead>
<tr>
<th>
Test number
</th>
<th>
Formation permeability K
</th>
<th>
Wellbore Reservoir Constants C
</th>
<th>
Epidermal coefficient s
</th>
<th>
Blockage ratio
</th>
<th>
Probe radius
</th>
<th>
Fitting formation pressure
</th>
<th>
Boundary distance
</th>
<th>
Pressure coefficient
</th>
<th>
Composite energy storage Ratio
</th>
<th>
Operation
</th>
</tr>
</thead>
<tbody id= "Tb_body" >
</tbody>
<tfoot id= "Load" >
<tr>
<TD align= "center" colspan= "one" >
</td>
</tr>
</tfoot>
</table>
<div class= "Navigation" >
<div style= "Text-align:left; Float:left; width:260px; " >
Total <label id= "Lbltoatl" ></label> strip data [<label id= "lblcurent" ></LABEL>] Page/Total [<label id=] Lblpagecount ">0</label>" page
</div>
<div style= "text-align:right; Float:right; " >
<a id= "First" href= "#" > Home </a> <a id= "Previous" href= "#" > Prev </a> <a id= "Next" href= "#" >
Next page </a> <a id= "Last" href= "#" > End </a>
</div>
</div>
</div>
</form>
</body>
2, the specific implementation of JS
Copy Code code as follows:
var pageIndex = 1; Page index
var where = "where 1=1";
$ (function () {
Binddata ();
Gettotalcount (); Total Record Bar number
Getpagecount (); Total Page Binding
First Page button click event
$ ("#first"). Click (function () {
PageIndex = 1;
$ ("#lblCurent"). Text (1);
Binddata ();
});
Previous Page button click 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 ();
});
Last page button click event
$ ("#last"). Click (function () {
var PageCount = parseint ($ ("#lblPageCount"). Text ());
PageIndex = PageCount;
Binddata ();
});
Inquire
$ ("#btnSearch"). Click (function () {
where = "where 1=1";
var CSBH = $ ("#txtCSBH"). Val ();
if (CSBH!= null && CSBH!= NaN) {
PageIndex = 1;
where + "and csbh like '%" + CSBH + "%";
}
Binddata ();
});
})
Ajax method gets the data and displays it on the page
function Binddata () {
$.ajax ({
Type: ' Get ',///Use Get method to access background
DataType: "JSON",//returning data in JSON format
URL: ".. /ajaxservice/jgcsservice.ashx ",//background address to access
Data: {"PageIndex": PageIndex, "where": where},//information to send
Ajaxstart:function () {$ ("#load"). Show ();
Complete:function () {$ ("#load"). Hide ();//ajax hidden loading prompt when the request completes
Success:function (msg) {//msg for returned data, do data binding here
var data = msg.table;
if (data.length!= 0) {
var t = document.getElementById ("Tb_body"); Get a table showing the data
while (t.rows.length!= 0) {
T.removechild (T.rows[0]); If the table already exists in the row when reading the data. Delete all
}
}
$.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><td><a href= ' 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"); Get a table showing the data
while (t.rows.length!= 0) {
T.removechild (T.rows[0]); If the table already exists in the row when reading the data. Delete all
}
Alert ("Load data failed");
}//Failed to load, request error handling
ajaxstop:$ ("#load"). Hide ()
});
Gettotalcount ();
Getpagecount ();
Bindpager ();
}
Footer Property Settings
function Bindpager () {
Populating the Distribution control information
var PageCount = parseint ($ ("#lblPageCount"). Text ()); Total pages
if (PageCount = = 0) {
document.getElementById ("Lblcurent"). InnerHTML = "0";
}
else {
if (PageIndex > PageCount) {
$ ("#lblCurent"). Text (1);
}
else {
$ ("#lblCurent"). Text (PageIndex); Current page
}
}
document.getElementById ("a"). 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;
}
Ajax method to get total pages
function Getpagecount () {
var PageCount;
$.ajax ({
Type: "Get",
DataType: "Text",
URL: ".. /ajaxservice/jgcsservice.ashx ",
Data: {"Wherepagecount": where},//"Wherepagecount" + where, personal advice not in this way
Async:false,
Success:function (msg) {
document.getElementById ("Lblpagecount"). InnerHTML = msg;
}
});
}
The Ajax method gets the total number of records
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, the general processing program ASHX code
Copy Code code as follows:
public class Jgcsservice:ihttphandler
{
readonly int pageSize = 15;
public void ProcessRequest (HttpContext context)
{
Context. Response.ContentType = "Text/plain";
Do not allow the browser to cache
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 = "";
Record total number of bars
if (!string. IsNullOrEmpty (context. request["Wherecount"])
{
string where = context. request.params["Wherecount"]. ToString ();
result = Jgcs.gettoatlnum (where). ToString ();
}
Total 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 JSON string
</summary>
<param name= "where" > Query conditions </param>
<param name= "PageIndex" > page index </param>
<returns>json Series </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, paging Query method can be seen, will this bar, to do a simple example of the start, the application in the processing can not write Oh, posted down only to do a reference
Paging method
Copy Code code as follows:
<summary>
Method of paging query
</summary>
<param name= "Orderfile" > Sort fields </param>
<param name= "where" > Query conditions </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 as
(
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, so much for the code.
