用jQuery中的ajax分页实现代码_jquery

程序员文章站 2022-04-10 14:15:33

...

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

具体实现请看源码：

1、aspx页面

复制代码代码如下:

ajax分页

编号：value="查询" />

测试编号	地层渗透率K	井筒储集常数C	表皮系数S	堵塞比	探测半径	拟合地层压力	边界距离	压力系数	复合储能比	操作

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 + " " +
" 用jQuery中的ajax分页实现代码_jquery

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

好了，代码就这么多

用jQuery中的ajax分页实现代码_jquery

分页存储过程(用存储过程实现数据库的分页代码)

jQuery实现弹出窗口弹出div层的实例代码

jQuery中layer分页器的使用

jQuery ajax的功能实现方法详解

JQuery中Ajax的操作完整例子

用DOM实现文章采集--通过jquery语法式的方法采集指定对象的文本

分页存储过程(用存储过程实现数据库的分页代码)

Jquery+Ajax+Json+存储过程实现高效分页

Python实现类似jQuery使用中的链式调用的示例

详解JavaScript原生封装ajax请求和Jquery中的ajax请求