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. IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部

    DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...

  2. LeetCode OJ-- Palindrome Partitioning II ***

    https://oj.leetcode.com/problems/palindrome-partitioning-ii/ 给定一个串,让把它划分成子串,要求每个子串都是回文的. 动态规划: 设数组 a ...

  3. 解决dvajs使用BrowserHistory路由模式后仍然会出现hash（哈希）

    在dvajs中,如果你在初始化dva对象的时候不作任何处理,那么你就会发现即使你是用了BrowserRouter来作为Router url中也是会出现#/.解决方法也很简单: 使用前先手动安装下 hi ...

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

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

  5. ansible 手册

    ansible 官方文档:https://docs.ansible.com/ansible/latest/index.html ansible 中文入门:http://getansible.com/ ...

  6. Web测试框架SeleniumBase

    前几天逛GitHub发现一个基于Selenium和unittest单元测试框架的一个测试框架SeleniumBase. Github地址:https://github.com/seleniumbase ...

  7. iscroll 子表左右滚动同时保持页面整体上下滚动

    if ( this.options.preventDefault && !utils.isBadAndroid && !utils.preventDefaultExce ...

  8. 某音乐类App评论相关API的分析及SQL注入尝试

    关键字:APIfen.工具使用.sql注入 涉及工具/包:Fiddler.Burpsuite.Js2Py.Closure Compiler.selenium.phantomjs.sqlmap 摘要: ...

  9. Cookie常用方法封装Utils

    1.查询某个指定的cookie package com.sun.etalk.cookie; import javax.servlet.http.Cookie; public class CookieU ...

  10. C#中用鼠标移动页面功能的实现（代码控制滚动条）

    项目中需要实现以下功能: 打印预览控件中,可以用鼠标拖动页面,以查看超出显示范围之外的部分内容. 该功能本来可以通过拉动水平和垂直滚动条来实现,但实际使用中,用户更趋向于直接用鼠标拖动页面来实现,很多 ...