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

具体实现请看源码:

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

}

}

好了,代码就这么多

html ajax实现分页代码,用jQuery中的ajax分页实现代码相关推荐

  1. jquery ajax循环调用,每个循环jQuery中的Ajax调用

    这是一个函数,我必须通过ajax调用写入一个xml文件.该代码在第一次进行ajax调用时工作正常.在每个循环的第二个循环中,ajax调用完全没有进行.我不知道为什么.我指定asyn为false.这没有 ...

  2. Ajax 01客户端和服务器 | jQuery中的ajax | 服务端接口

    Ajax -网络编程 客户端和服务器的基本概念 上网的目的 获取和消费(使用)资源 客户端和服务器(服务端) 客户端: 使用服务的计算机 如果一台计算机希望成为客户端,必须安装浏览器 服务端: 提供服 ...

  3. 【Ajax】了解Ajax与jQuery中的Ajax

    一.了解Ajax 什么是Ajax Ajax 的全称是 Asynchronous Javascript And XML(异步 JavaScript 和 XML). 通俗的理解:在网页中利用 XMLHtt ...

  4. JQuery中使用Ajax赋值给全局变量失败异常的解决方法,jqueryajax

    我们在用JQuery的Ajax从后台提取数据后想把它赋值给全局变量,但是却怎么都赋不进,为什么呢? 原因其实很简单,我们用的Ajax是异步操作,也就是说在你赋值的时候数据还没提取出来,你当然赋不进去, ...

  5. jquery中ajax的分页,利用jQuery中的ajax分页实现代码

    本文实例讲解了用jQuery中的ajax分页相关代码,分享给大家供大家参考,具体内容如下 把分页封装到一个jsp里,那么大家就可以通过include的方式引入分页的页面这里起名为page_ajax.j ...

  6. 什么是Ajax ? 为什么要学习Ajax jQuery中的Ajax怎么使用 10

    什么是Ajax Ajax 的全称是 Asynchronous JavaScript And XML (异步 JavaScript 和 xml ) 通俗理解:在网页中利用 XMLHttpRequest ...

  7. 关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题...

    前段时间做一个项目,而项目中所有的请求都要用jquery 中的ajax请求或者post请求,但是开始处理一些简单操作还好,但是自己写了一些验证就出现问题了,比如表单提交的时候,要验证帐号的唯一性,所以 ...

  8. Java程序员从笨鸟到菜鸟之(八十九)跟我学jquery(五)jquery中的ajax详解

    Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数 ...

  9. Jquery中使用ajax请求SSM后台时提示:org.springframework.http.converter.HttpMessageNotReadableException: Could no

    场景 Jquery中使用ajax向SSM后台请求数据时提示: org.springframework.http.converter.HttpMessageNotReadableException: C ...

最新文章

  1. 【人物】徐小平:既然做老大,你就得让兄弟们有肉吃
  2. Webpack 4x 之路 ( 五 )
  3. 如何删除springboot中的子项目
  4. JavaScript JSON数据格式
  5. JAVA 手机号正则 工具类
  6. 原油等特殊期货开户要求和豁免
  7. 帆软报表FineReport中数据连接的JDBC连接池属性问题
  8. 交银施罗德基金郭斐:集中心力,布好一盘“成长投资”
  9. c语言编译功率谱密度函数,科学网—6、功率谱密度函数估计 - 柏世平的博文
  10. JPA中的could not initialize proxy - no Session异常分析与解决
  11. Q1财报蛋壳公寓再亏损:盈利死穴如何破?
  12. 导出微信公众号文章批量下载的小工具
  13. 鹏哥C语言红皮书(14-19)
  14. 利用Python实现自动识别图片文字 -- OCR
  15. 浏览器输入一个URL地址后发生的事情
  16. MAC 启动jar失败 显示 Unable to access jarfile xxx.jar
  17. 日志查看 docker容器启动失败原因
  18. 循环神经网络RNN论文解读
  19. 武警二路擒敌拳16式
  20. linux shell 笔记

热门文章

  1. android Handler机制原理解析(一篇就够,包你形象而深刻)
  2. Android Handler机制笔记
  3. Module not found: Error: Can‘t resolve ‘hls.js‘
  4. SECS/GEM300半导体标准,12寸晶圆半导体标准
  5. 智能车的电机驱动DRV8833、DRV8833驱动直流电机、DRV8833接线图、DRV8833 PWM、DRV8833驱动代码
  6. Linux学习之文件系统 ZFS - 文件系统简介
  7. USACO的文件提交格式
  8. html--电子闹钟
  9. ad域服务器站点,如何变更站点 AD 域服务器IP地址
  10. HPU272 wzy的大冒险——出发前的清理(米勒罗宾板子)