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. Java Web项目在Mac系统上启动时提示nodename nor servname provided

    今天一不小心更新了Mac系统,然后在启动Java Web项目的时候,提示了java.net.UnknownHostException: MAC-mini-local nodename nor serv ...

  2. 极速Node.js：来自LinkedIn的10个性能提升秘籍

    from:http://faylai.iteye.com/blog/1293194 1.避免使用同步的方法 nodejs 是基于单线程.为了让单线程能够处理高并发的请求,我们尽量要避免让线程等待,阻塞 ...

  3. extern "C" 有关问题

    之前帮老板编译一个库的代码,遇到了一些问题,后来发现问题出现在extern "C"语法上. 1. C/C++语法extern 关键字 extern是C/C++语言中表明函数和全局变 ...

  4. iOS 11系列 - Xcode 9新特性

    Xcode 9最近刚刚发布,带来了一系列不错的新特性,可以更好的帮助到开发者完成开发工作. Xcode Runtime Tool Xcode 9中有许多Runtime Tool可以帮助开发者找到代码错 ...

  5. 09_Hadoop启动或停止的三种方式及启动脚本

    1.Hadoop启动或停止 1)第一种方式 分别启动 HDFS 和 MapReduce,命令如下: 启动: $ start-dfs.sh $ start-mapred.sh 停止: $ stop-ma ...

  6. Linux CentOS7安装Mysql5.7

    一.下载mysql mkdir /home/install #创建install目录 在/home/install目录下下载mysql5.7 wget https://cdn.mysql.com//D ...

  7. Android摄像头测量尺（Advanced Ruler Pro）使用方法

    http://www.cnblogs.com/sinojelly/archive/2010/08/13/1799341.html Advanced Ruler Pro是一个Android手机应用程序, ...

  8. 阿拉伯数字转中文大写数字的JS

    function intToChinese ( str ) { str = str+''; var len = str.length-1; var idxs = ['','十','百','千','万' ...

  9. 仿Facebook登录表单

    在线演示 本地下载

  10. get_called_class--后期静态绑定（"Late Static Binding"）类的名称

    get_called_class--后期静态绑定("Late Static Binding")类的名称 string get_called_class ( void ) 获取静态方 ...