var pageIndex = 0;
var pageSize = 10;
$(function () {
$("#btnSearch").click(function () {
var name = $("#txtSearch").val();
pageIndex = 0;
AjaxGetData(name, pageIndex, pageSize);
});
AjaxGetData(name, pageIndex, pageSize);
}); function AjaxGetData(name, index, size) {
$.ajax({
url: "PageHandler.ashx",
type: "Get",
data: "Name=" + name + "&PageIndex=" + index + "&PageSize=" + size,
dataType: "json",
success: function (data) {
var htmlStr = "";
htmlStr += "<table>"
htmlStr += "<thead>"
htmlStr += "<tr><td>CustomerID</td><td>CompanyName</td><td>ContactName</td><td>ContactTitle</td><td>Address</td><td>City</td></tr>"
htmlStr += "</thead>";
htmlStr += "<tbody>"
for (var i = 0; i < data.Customers.length; i++) {
htmlStr += "<tr>";
htmlStr += "<td>" + data.Customers[i].CustomerID + "</td>"
+ "<td>" + data.Customers[i].CompanyName + "</td>"
+ "<td>" + data.Customers[i].ContactName + "</td>"
+ "<td>" + data.Customers[i].ContactTitle + "</td>"
+ "<td>" + data.Customers[i].Address + "</td>"
+ "<td>" + data.Customers[i].City + "</td>"
htmlStr += "</tr>";
}
htmlStr += "</tbody>";
htmlStr += "<tfoot>";
htmlStr += "<tr>";
htmlStr += "<td colspan='6'>";
htmlStr += "<span>共有记录" + data.Count + ";共<span id='count'>" + (data.Count % 10 == 0 ? parseInt(data.Count / 10) : parseInt(data.Count / 10 + 1)) + "</span>页" + "</span>";
htmlStr += "<a href='javascript:void' onclick='GoToFirstPage()' id='aFirstPage' >首 页</a>&nbsp;&nbsp; ";
htmlStr += "<a href='javascript:void' onclick='GoToPrePage()' id='aPrePage' >前一页</a>&nbsp;&nbsp; ";
htmlStr += "<a href='javascript:void' onclick='GoToNextPage()' id='aNextPage'>后一页</a>&nbsp;&nbsp; ";
htmlStr += "<a href='javascript:void' onclick='GoToEndPage()' id='aEndPage' >尾 页</a>&nbsp;&nbsp; ";
htmlStr += "<input type='text' /><input type='button' value='跳转' onclick='GoToAppointPage(this)' /> ";
htmlStr += "</td>";
htmlStr += "</tr>";
htmlStr += "</tfoot>";
htmlStr += "</table>"; $("#divSearchResult").html(htmlStr);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#divSearchResult").html("未查询到任何项!");
}
});
}
//首页
function GoToFirstPage() {
pageIndex = 0;
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
}
//前一页
function GoToPrePage() {
pageIndex -= 1;
pageIndex = pageIndex >= 0 ? pageIndex : 0;
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
}
//后一页
function GoToNextPage() {
if (pageIndex + 1 < parseInt($("#count").text())) {
pageIndex += 1;
}
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
}
//尾页
function GoToEndPage() {
pageIndex = parseInt($("#count").text()) - 1;
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
}
//跳转
function GoToAppointPage(e) {
var page = $(e).prev().val();
if (isNaN(page)) {
alert("请输入数字!");
}
else {
var tempPageIndex = pageIndex;
pageIndex = parseInt($(e).prev().val()) - 1;
if (pageIndex < 0 || pageIndex >= parseInt($("#count").text())) {
pageIndex = tempPageIndex;
alert("请输入有效的页面范围!");
}
else {
AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
}
}
}

Ajax分页js代码的更多相关文章

  1. ajax 分页完全代码整理

    /* ajax分页 */ var page_cur = 1; //当前页 var total_num, page_size, page_total_num;//总记录数,每页条数,总页数 functi ...

  2. 网站真分页js代码该怎么写?

    真分页这个词对程序猿们来说,并不是一个陌生的词汇,但是如果你是初次学习真分页,或许还是得花点时间小小研究下,下面是之前去转盘网(喜欢的可以看看,也可以进入引擎模式)的真分页js部分代码,html部分的 ...

  3. 补充ajax分页的代码

    1.主页代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  4. 自己实现的ajax分页js

    /** * 分页 * @author chenqionghe * @param data json数据,包含totalPage,count * @param page 获取的页数 * @param o ...

  5. AJAX原生JS代码

    var http_request = false;function send_request(method,url,content,responseType,callback){ http_reque ...

  6. laraver ajax分页

    ,设置分页容器参考laraver手册 我的设置代码如下: ,控制器调用的方法:代码如下 );         include($path);         $content = ob_get_cle ...

  7. 非常不错的一个JS分页效果代码

    这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原 ...

  8. ThinkPHP AJAX分页及JS缓存的应用

    //AJAX分页详见兄弟连PHP项目视频教程22讲35分钟左右 主要实现是需要将分页中的每个链接都改为AJAX请求 //前端缓存技术:基于javascript传输的数据,只要浏览器没关,都保存在内存中 ...

  9. [js开源组件开发]ajax分页组件

    ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...

随机推荐

  1. 二叉搜索树的实现及指针问题的一点思考(C++)

    今天实现二叉搜索树的时候因为指针的问题卡了一上午(实在不应该...),一直segmentation fault,个人感觉还是需要记录一下的. 首先贴一下做的题的意思: 输入一系列整数,建立二叉排序数, ...

  2. iOS沙盒机制的基本操作总结

    每个ios程序都有自己的沙盒(sandBox),ios8之后提供沙盒部分开放 我们可以访问沙盒下的文件夹 文件夹包括: 1,documents:保存应用运行时生成的需要持久化的数据 2.tem:保存临 ...

  3. TOMCAT配置外部应用

    原来我们都是把项目放到webapps目录下,但其实是可以把项目放到其他文件夹下的,如果把项目放到其他目录下同时也希望tomcat可以运行它,有两种方法: 第一种方法:   conf/server.xm ...

  4. 【微信Java开发 --1】内网穿透外网,使用外网域名可以访问到本地项目

    1.首先上https://natapp.cn/ 2.接下来在网站申请账号 3.购买免费隧道 4.为你的免费隧道设置名称以及端口号,由于本人本地的使用Tomcat做服务器,所以用惯了8080端口,因此设 ...

  5. kylin1.5新特性 new aggregation group

    终于啃完并理解了,我果然弱鸡.new aggregation group,是kylin 1.5的新特性:老版本中的agg是需要选中所有可能被使用的纬度字段,以供查询:但存在高纬度的查询需求,例如查询某 ...

  6. Linux sed 批量替换多个文件中的字符串

    sed -i "s/oldstring/newstring/g" `grep oldstring -rl yourdir` 例如:替换/home下所有文件中的www.bcak.co ...

  7. Android回调接口的写法

    方法一: 定义一个接口,里面写想要对外提供的方法,在逻辑层方法的参数里传递进去,让在需要的时候调接口里的方法. 实例一: public class SmsUtils { public interfac ...

  8. Swift3.0语言教程使用Unicode范式标准化获取字符串

    Swift3.0语言教程使用Unicode范式标准化获取字符串 Swift3.0语言教程使用Unicode范式标准化获取字符串,在NSString中可以使用4个属性去使用Unicode范式标准化获取字 ...

  9. 单机c1000k连接

    单机c1000k连接即单机实现百万连接,首先要注意的是连接是虚拟的逻辑的,连接最终落于 网卡,清晰概念才能更深入更清晰的想出问题的解决办法. 参考 http://www.ideawu.net/blog ...

  10. linux TCP Wrappers

    1. TCP Wrapper简介 (出处:http://www.softpanorama.org/Net/Network_security/TCP_wrappers/) (维基百科)TCP Wrapp ...