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

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

3.计算总数的页面代码

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

补充ajax分页的代码的更多相关文章

  1. ajax 分页完全代码整理

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

  2. Ajax分页js代码

    var pageIndex = 0; var pageSize = 10; $(function () { $("#btnSearch").click(function () { ...

  3. laraver ajax分页

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

  4. 原生ajax分页，无刷新分页，最简化。超简单，代码最少

    <html><script> var page=1; // 页面第一次加载,显示第一页 window.onload=function(){ ajax_go(1) } //分页的 ...

  5. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  6. ThinkPHP 整合Bootstrap Ajax分页

    ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...

  7. yii2的分页和ajax分页

    要想使用Yii分页类第一步:在控制器层加载分页类 use yii\data\Pagination;第二步: 使用model层查询数据,并用分分页,限制每页的显示条数$data = User::find ...

  8. MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)

    该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...

  9. PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )

    /* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8 **** ...

随机推荐

  1. hdu 4520

    小Q系列故事——最佳裁判 Time Limit: 500/200 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total ...

  2. Cannot resolve symbol KeyEventCompat（android.support.v4.view.KeyEventCompat找不到）

    Cannot resolve symbol KeyEventCompat(android.support.v4.view.KeyEventCompat找不到) 解决方案 KeyEventCompat类 ...

  3. 洛谷——P2626 斐波那契数列（升级版）

    P2626 斐波那契数列(升级版) 题目背景 大家都知道,斐波那契数列是满足如下性质的一个数列: • f(1) = 1 • f(2) = 1 • f(n) = f(n-1) + f(n-2) (n ≥ ...

  4. Network | TCP

    Transmission Control Protocol, TCP是一种面向连接的.可靠的.基于字节流的传输层通信协议. 应用层向TCP层发送用于网间传输的.用8位字节表示的数据流,然后TCP把数据 ...

  5. luogu P3147 [USACO16OPEN]262144

    题目描述 Bessie likes downloading games to play on her cell phone, even though she doesfind the small to ...

  6. my -> mysql on duplicate key update使用总结

    CREATE TABLE `t_duplicate` ( `a` int(11) NOT NULL, `b` int(255) DEFAULT NULL, `c` int(255) DEFAULT N ...

  7. SQLITE3 --详解

    由于我主要负责我们小组项目数据库模块的部分所以这几天都一直在研究在iphone中最为常用的一个简单数据库sqlite,自己也搜集很多资料,因此在 这里总结一下这几天的学习成果: Sqlite 操作简明 ...

  8. 国家商用password（五）基于SM2的软件授权码生成及校验

    将公开密钥算法作为软件注冊算法的优点是Cracker非常难通过跟踪验证算法得到注冊机.以下.将介绍使用SM2国密算法进行软件注冊的方法. 生成授权码 选择SM2椭圆曲线參数(P,a,b,N,Gx,Gy ...

  9. Hadoop部署启动异常问题排查

    hadoop的日志目录(/home/hadoop/app/hadoop-2.6.4/logs) 1.hadoop启动不正常用浏览器访问namenode的50070端口,不正常,需要诊断问题出在哪里: ...

  10. 2017.2.20 activiti实战--第五章--用户与组及部署管理（一）用户与组

    学习资料:<Activiti实战> 第五章 用户与组及部署管理(一)用户与组 内容概览:讲解activiti中内置的一套用户.组的关系,以及如何通过API添加.删除.查询. 5.1 用户与 ...