1.主页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script src="jquery-1.11.2.min.js"></script>

<style type="text/css">

.dangqian{ background-color:#69F}

</style>

</head>

<body>

<div>

<input type="text" id="key" />

<input type="button" value="查询" id="chaxun" />

</div>

<table width="100%" border="1" cellpadding="0" cellspacing="0">

    <tr>

        <td>代号</td>

        <td>名称</td>

        <td>父级代号</td>

    </tr>

    <tbody id="nr">

    </tbody>

</table>

<div id="xinxi">

</div>

</body>

<script type="text/javascript">

var page = 1; //当前页

Load(); //加载数据

LoadXinXi(); //加载分页信息

//查询

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

        page = 1;

        Load(); //加载数据

        LoadXinXi(); //加载分页信息

    })

function Load()

{

    var key = $("#key").val(); //查询条件

    $.ajax({

            url:"chuli.php",

            data:{page:page,key:key},

            type:"POST",

            dataType:"JSON",

            success: function(data){

                    var str = "";

                    for(var k in data)

                    {

                        str +="<tr><td>"+data[k].AreaCode+"</td><td>"+data[k].AreaName+"</td><td>"+data[k].ParentAreaCode+"</td></tr>";

                    }

                    $("#nr").html(str);

                }

        });

}

function LoadXinXi()

{

    var str = "";

    var minys = 1;

    var maxys = 1;

    var key = $("#key").val();

    //查总页数

    $.ajax({

            async:false,

            url:"zys.php",

            data:{key:key},

            type:"POST",

            dataType:"TEXT",

            success: function(d){

                    maxys = d;

                }

        });

    str += "<span>总共："+maxys+"页</span> &nbsp;";

    str += "<span id='prev'>上一页</span>";

    for(var i=page-2;i<page+3;i++)

    {

        if(i>=minys && i<=maxys)

        {

            if(i==page)

            {

                str += "<span class='dangqian' bs='"+i+"'>"+i+"</span> &nbsp;";

            }

            else

            {

                str += "<span class='list' bs='"+i+"'>"+i+"</span> &nbsp;";

            }

        }

    }

    str += "<span id='next'>下一页</span>"; 

    $("#xinxi").html(str);

    //给上一页添加点击事件

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

            page = page-1;

            if(page<1)

            {

                page=1;

            }

            Load(); //加载数据

            LoadXinXi(); //加载分页信息

        })

    //给下一页加点击事件

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

            page = page+1;

            if(page>maxys)

            {

                page=maxys;

            }

            Load(); //加载数据

            LoadXinXi(); //加载分页信息

        })

    //给中间的列表加事件

    $(".list").click(function(){

            page = parseInt($(this).attr("bs"));

            Load(); //加载数据

            LoadXinXi(); //加载分页信息

        })

}

</script>

</html>

2.获取总页数处理页面

<?php

include("DBDA.class.php");

$db = new DBDA();

$key = $_POST["key"];

$num = 20;

$sql = "select count(*) from chinastates where areaname like '%{$key}%'";

$zts = $db->StrQuery($sql);

echo ceil($zts/$num);

3.分页查询处理页面

<?php

include("DBDA.class.php");

$db = new DBDA();

$page = $_POST["page"];

$key = $_POST["key"];

$num = 20;

$tiao = ($page-1)*$num;

$sql = "select * from chinastates where areaname like '%{$key}%' limit {$tiao},{$num}";

echo $db->JSONQuery($sql);

Ajax做无刷新分页的更多相关文章

  1. Ajax 实现无刷新分页

    Ajax 实现无刷新分页

  2. TP2.0或3.1 或者 3.2 下使用ajax+php做无刷新分页（转+自创）

    1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...

  3. 在Thinkphp中使用AJAX实现无刷新分页

    在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...

  4. javascript项目实战---ajax实现无刷新分页

    分页: limit 偏移量,长度; limit 0,7; 第一页 limit 7,7; 第二页 limit 14,7; 第三页 每页信息条数:7 信息总条数:select count(*) from ...

  5. ajax实现无刷新分页效果

    基于jquery.pagination.js实现的无刷新加载分页数据效果. 简介与说明 * 该插件为Ajax分页插件,一次性加载数据,故分页切换时无刷新与延迟.如果数据量较大,加载会比较慢. * 分页 ...

  6. Ajax做无刷新三级联动

    1.引入JS and Jquery包 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. knockout Ajax异步无刷新分页 Demo +mvc+bootstrap

    最近工作中web客户端需要用到knockout,在此记录下一些Demo,以后用到的时候查找起来方便.也希望给新入门的knockout使用者一点经验.knockout官方文档.这儿是一个使用knocko ...

  8. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  9. 学习笔记之AJAX无刷新分页

    利用AJAX实现无刷新分页技术原理: 其主要是利用AJAX的异步处理机制,实现数据的异步传递,它隐藏了客户端向服务端请求数据的状态,在客户端表现为无刷新的显示状态. 实现分页的步骤: 1.客服端点击页 ...

随机推荐

  1. Spring笔记：AOP基础

    Spring笔记:AOP基础 AOP 引入AOP 面向对象的开发过程中,我们对软件开发进行抽象.分割成各个模块或对象.例如,我们对API抽象成三个模块,Controller.Service.Comma ...

  2. SpringMVC:学习笔记(5)——数据绑定及表单标签

    SpringMVC——数据绑定及表单标签 理解数据绑定 为什么要使用数据绑定 基于HTTP特性,所有的用户输入的请求参数类型都是String,比如下面表单: 按照我们以往所学,如果要获取请求的所有参数 ...

  3. git在IDEA中的使用

    学习资料: http://blog.csdn.net/autfish/article/details/52513465  (关于提交的讲解) http://blog.csdn.net/ck443870 ...

  4. OC源文件扩展名

    常见的文件扩展名 扩展名 含义 扩展名 含义 .c C语言源文件 .mm Objective-C++源文件 .cc..cpp C++源文件 .pl Perl源文件 .h 头文件 .o Object(编 ...

  5. $Eclipse+Tomcat搭建本地服务器并跑通HelloWorld程序

    本文结构:(一)环境准备(二)在Eclipse里创建Dynamic Web工程(三)写一个简单的Servlet类并配置web.xml(四)运行程序 (一)环境准备 1.Eclipse:要使用for J ...

  6. Windos Server 2008 FTP 服务安装

    安装服务:FTP 系统环境:Windos 2008 R2 x64 安装FTP服务 管理-->角色-->添加角色-->Web 服务器 IIS 测试

  7. blast+学习之search tools

    search tools:blastn, blastp, blastx, tblastx, tblastn, psiblast, rpsblast, and rpstblastn 1.blastn: ...

  8. body-parser小解

    body-parser用来解析http请求体,对不同的content-type有不同的处理方式, 首先介绍一下常见的四种Content-Type: 1.application/x-www-form-u ...

  9. 20145231《Java程序设计》课程总结

    20145231 <Java程序设计>课程总结 每周读书笔记链接汇总 ● 20145231<Java程序设计>第一周学习总结 ●20145231<Java程序设计> ...

  10. Qt打包过大

    经常看到网上有些论调说 Qt 程序无比庞大,甚至拿 .NET 程序来比,说 Qt 程序打包以后跟 .NET 安装包差不多大.由此影响了很多人对 Qt 的选择.我觉得有必要对此做一些澄清—— 显然这个说 ...