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. javascript 省市二级联动

    通过遍历二维数组 获取到 二级列表的 每个option 然后onchange事件 获取到省,然后循环遍历该省具有的市并将遍历到的市添加到id为city的选择器中. 获取完需要清空二级列表的内容,不然不 ...

  2. EasyUI左边树菜单和datagrid分页

    //这个页面是Home.html 1 <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...

  3. JS-严格模式、非严格模式

    2018年11月14日晚上,我在“深入理解javascript”书上第一次知道“严格模式”“非严格模式”这2个名词: “严格模式”使用指令:“use strict”: 这个指令我其实有经常看到,在其他 ...

  4. (转)C++常用函数汇总

    1.标准C++库字符串类std::string的用法 begin       得到指向字符串开头的Iterator end       得到指向字符串结尾的Iterator rbegin        ...

  5. 正确地使用GIT FORK

    摘自github官方网站,稍后我将抽空翻译. Fork a repo https://help.github.com/articles/fork-a-repo/ Syncing a fork http ...

  6. GIT 自动转换行符的案例

    在windows上安装git客户端后, 默认情况下,git clone 项目到Windows本地,git会强制将文件的换行符转成CTRL,而不是LF.我们再次使用git push的时候,换行符又会自动 ...

  7. Spring事务管理——事务的传播行为

    1.简介 当事务方法被另一个事务方法调用时,必须指定事务应该如何传播.例如:方法可能继续在现有事务中运行,也可能开启一个新事务,并在自己的事务中运行. 事务的传播行为可以由传播属性指定.Spring定 ...

  8. Rebound动画框架简单介绍

    Rebound动画框架简单介绍 Android菜鸟一枚,有不对的地方希望大家指出,谢谢. 最近在接手了一个老项目,发现里面动画框架用的是facebook中的Rebound框架,由于以前没听说过,放假时 ...

  9. SSH（Struts2 + Hibernate + Spring）嵌入 KindEditor（KE）

      1.    kindeditor 灌水 (下载地址,demo)          经过两天的折磨,又源代码,又官网学习,又网络搜索的,终于成功的嵌入KindEditor了. KindEditor确 ...

  10. (转)ubuntu/var/log/下各个日志文件

    本文简单介绍ubuntu/var/log/下各个日志文件,方便出现错误的时候查询相应的log   /var/log/alternatives.log-更新替代信息都记录在这个文件中 /var/log/ ...