html ajax实现分页代码,用jQuery中的ajax分页实现代码

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

具体实现请看源码：

1、aspx页面

ajax分页

编号：

value="查询" />

测试编号

地层渗透率K

井筒储集常数C

表皮系数S

堵塞比

探测半径

拟合地层压力

边界距离

压力系数

复合储能比

操作

共条数据 第[]页/共[0]页

首页 上一页

下一页 末页

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("

" + item.CSBH + "" + item.K + " " + item.C +

" 

" + item.S + " " + item.DSB + " " + item.TCBJ +

"

" + item.LHDCYL + " " + item.BJJL + "" + item.YLXS +

" 

" + item.FCTH + "  " +

"

"id='btnInsert'style='border-width:0px;' />

");

})

},

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

}

///

/// 返回json串

///

/// 查询条件

/// 页面索引

/// json串

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

分页方法

///

/// 分页查询的方法

///

/// 排序字段

/// 查询条件

/// 当前页

/// 页大小

///

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

}

}

///

/// 结果参数总条数

///

///

///

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

}

}

好了，代码就这么多