用jQuery中的ajax分页实现代码_Javascript教程-查字典教程网

摘要：功能简介：主要功能就是分页显示数据了，可在配置文件中配置每页要显示的页码,可以做多条件联合查询，这里只是做一个简单的查询。欢迎拍砖，有问题的...

功能简介：主要功能就是分页显示数据了，可在配置文件中配置每页要显示的页码,可以做多条件联合查询，这里只是做一个简单的查询。欢迎拍砖，有问题的还望大虾们斧正哈。看看这个效果图，无刷新的噢！！

具体实现请看源码：

1、aspx页面

复制代码代码如下:

<%@ 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">

<head>

<title>ajax分页</title>

</head>

<body>

<div>

编号：<asp:TextBox ID="txtCSBH" runat="server"></asp:TextBox><input id="btnSearch" type="button"

value="查询" />

</div>

<thead>

<tr>

<th>

测试编号

</th>

<th>

地层渗透率K

</th>

<th>

井筒储集常数C

</th>

<th>

表皮系数S

</th>

<th>

堵塞比

</th>

<th>

探测半径

</th>

<th>

拟合地层压力

</th>

<th>

边界距离

</th>

<th>

压力系数

</th>

<th>

复合储能比

</th>

<th>

操作

</th>

</tr>

</thead>

</tbody>

<tr>

</td>

</tr>

</tfoot>

</table>

<div>

共<label id="lblToatl"></label>条数据第[<label id="lblCurent"></label>]页/共[<label id="lblPageCount">0</label>]页

</div>

<div>

下一页</a> <a id="last" href="#">末页</a>

</div>

</form>

</body>

</html>

2、具体实现JS

复制代码代码如下:

var pageIndex = 1; //页索引

var where = " where 1=1";

$(function() {

BindData();

// GetTotalCount(); //总记录条数

//GetPageCount(); //总页数绑定

//第一页按钮click事件

$("#first").click(function() {

pageIndex = 1;

$("#lblCurent").text(1);

BindData();

});

//上一页按钮click事件

$("#previous").click(function() {

if (pageIndex != 1) {

pageIndex--;

$("#lblCurent").text(pageIndex);

}

BindData();

});

//下一页按钮click事件

$("#next").click(function() {

var pageCount = parseInt($("#lblPageCount").text());

if (pageIndex != pageCount) {

pageIndex++;

$("#lblCurent").text(pageIndex);

}

BindData();

});

//最后一页按钮click事件

$("#last").click(function() {

var pageCount = parseInt($("#lblPageCount").text());

pageIndex = pageCount;

BindData();

});

//查询

$("#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方法取得数据并显示到页面上

function BindData() {

$.ajax({

type: "get", //使用get方法访问后台

dataType: "json", //返回json格式的数据

url: "../AjaxService/JgcsService.ashx", //要访问的后台地址

data: { "pageIndex": pageIndex, "where": where }, //要发送的数据

ajaxStart: function() { $("#load").show(); },

complete: function() { $("#load").hide(); }, //AJAX请求完成时隐藏loading提示

success: function(msg) {//msg为返回的数据，在这里做数据绑定

var data = msg.table;

if (data.length != 0) {

var t = document.getElementById("tb_body"); //获取展示数据的表格

while (t.rows.length != 0) {

t.removeChild(t.rows[0]); //在读取数据时如果表格已存在行．一律删除

}

$.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='查看详细信息'" +

"id='btnInsert' /></a></td></tr>");

})

error: function() {

var t = document.getElementById("tb_body"); //获取展示数据的表格

while (t.rows.length != 0) {

t.removeChild(t.rows[0]); //在读取数据时如果表格已存在行．一律删除

}

alert("加载数据失败");

} //加载失败，请求错误处理

//ajaxStop:$("#load").hide()

});

GetTotalCount();

GetPageCount();

bindPager();

}

// 页脚属性设置

function bindPager() {

//填充分布控件信息

var pageCount = parseInt($("#lblPageCount").text()); //总页数

if (pageCount == 0) {

document.getElementById("lblCurent").innerHTML = "0";

}

else {

if (pageIndex > pageCount) {

$("#lblCurent").text(1);

}

else {

$("#lblCurent").text(pageIndex); //当前页

}

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;

}

//AJAX方法取得总页数

function GetPageCount() {

var pageCount;

$.ajax({

type: "get",

dataType: "text",

url: "../AjaxService/JgcsService.ashx",

data: { "wherePageCount": where }, //"wherePageCount" + where,个人建议不用这种方式

async: false,

success: function(msg) {

document.getElementById("lblPageCount").innerHTML = msg;

}

});

}

//AJAX方法取得记录总数

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、一般处理程序ashx中的代码

复制代码代码如下:

public class JgcsService : IHttpHandler

{

readonly int pageSize = 15;

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

//不让浏览器缓存

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 = "";

//记录总条数

if (!string.IsNullOrEmpty(context.Request["whereCount"]))

{

string where = context.Request.Params["whereCount"].ToString();

result = Jgcs.GetToatlNum(where).ToString();

}

//总页数

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;

}

//分页数据

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>

/// 返回json串

/// </summary>

/// <param name="where">查询条件</param>

/// <param name="pageIndex">页面索引</param>

/// <returns>json串</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、分页查询的方法可看可不看了，都会这个吧，做示例简单的开了个头，应用时在处理方面可不要这么去写噢，贴下来仅做一个参考

分页方法

复制代码代码如下:

/// <summary>

/// 分页查询的方法

/// </summary>

/// <param name="orderFile">排序字段</param>

/// <param name="where">查询条件</param>

/// <param name="pageNumber">当前页</param>

/// <param name="pageSize">页大小</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>

/// 结果参数总条数

/// </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();

}

好了，代码就这么多