ajax实现数据分页查询
用ajax实现对数据库的查询以及对查询数据进行分页，供大家参考，具体内容如下
主页面代码
<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>
js代码
<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);//把数据返回表格
}
});
}
functionLoadXinXi()
{
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> ";
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> ";
}
else
{
str += "<span class='list' bs='"+i+"'>"+i+"</span> ";
}
}
}
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>
处理页面1
<?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);
处理页面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);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
kkpager 实现ajax分页查询功能
前台分页数据,适合数据少量的时候,因为分页的数据是从后台获取的,大数据的话不建议使用 先看下前台代码: @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/kkpager/lib/jquery-1.10.2.min.js
-
Ajax写分页查询（实现不刷新页面）
要求: 获取数据库中大量的信息显示在页面上,必然要使用到分页查询: 若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好, 所以最好使用Ajax的方法写分页查询: 1.先来找一张数据很多的表吧! 一张简单的表 代码,引入jquery包: <script src="jquery-1.11.2.min.js"></script> 写一张表格,显示我们的代号跟名称: <table class="table table-striped&
-
Spring Data JPA+kkpager实现分页功能实例
一.spring Data JPA分页 分页效果如下: 前台表格用的是: Bootstrap 分页插件用的是: kkpager kkpager是一个js分页展示控件,传入简单参数就能使用的分页效果控件,github地址:https://github.com/pgkk/kkpager 项目结构: FamilyMember实体类: package com.fendo.entity; import java.io.Serializable; import java.util.Date; import
-
ajax的分页查询示例（不刷新页面）
既然是分页查询,那么就要有张数据很多的表,可以让它进行分页显示,用普通的方法进行分页查询必然是要刷新页面的,这里要实现不刷新页面进行分页显示数据,就要用到ajax方式.进行编写代码 (1)先写个显示数据的页面,分页查询需要那几个部分呢? 1.首先是查询的文本框输入,还有查询按钮,那么就开始写代码吧 <div> <input type="text" id="key" /> //输入查询字的文本框 <input type="but
-
ajax分页查询详解
(1)先写个显示数据的页面,分页查询需要那几个部分呢? 1.首先是查询的文本框输入,还有查询按钮,那么就开始写代码吧 <div> <input type="text" id="key" /> //输入查询字的文本框 <input type="button" value="查询" id="chaxun" /> //查询按钮,起名字是为了以后给这个按钮加事件,因为只有点击了才
-
Ajax案例集下载：新增分页查询案例（包括《Ajax开发精要》中的两个综合案例） 下载
在<Ajax开发精要>中,我构建了两个简单的综合范例.一个是支持增.删.改.模糊搜索的简单留言簿,另外一个是模拟MSN Space所提供的日志评论.固定链接.引用通告以及自定义列表管理的功能. 今天新增一个分页查询的案例.同样的,与之前的两个案例类似,分页查询的持久化数据依然来自xml文档,以方便网友的拷贝和部署.构建这个案例的方法与之前两个案例大致相当,都是使用XMLHttpRequest.responseXML获取数据,然后填充到页面的相应位置.构建过程中注意代码复用. <Ajax开
-
ajax实现数据分页查询
用ajax实现对数据库的查询以及对查询数据进行分页,供大家参考,具体内容如下 主页面代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <scri
-
浅谈Mysql大数据分页查询解决方案
目录 1.简介 2.分页插件使用 3.sql测试与分析 3.1 limit现象分析 3.2 解决之道 4 测试时走过的坑 4.1 百万数据内容都一样 4.2 写sql时,把"77"写成了77: 4.3 一个有趣的现象 总结 1.简介 之前,面阿里的时候,有个面试官问我有没有使用过分页查询,我说有,他说分页查询是有问题的,怎么解决:后来这个问题我没有回答出来:本着学习的态度,今天来解决一下这个问题: 2.分页插件使用 1.pom文件 <dependency> <grou
-
IntelliJ IDEA中ajax开发实现分页查询示例
JavaEE三层架构实现ajax分页查询 开发环境: 系统 window10 IDE:IntelliJ IDEA2017.3.2 数据库:MySQL5.5 数据库连接工具: Navicat 浏览器:chrome 版本号 65.0.3325.181 第一步:代码实现之前期准备 在IDEA中开发前期配置的工作,网上的帖子很多,我 在这里就不再赘述.主要说三点 在服务器的配置中,红色框框的两项要选择update classes and resource ,选择了之后可以实现热部署. 要在此处填写项目的
-
SQL数据分页查询的方法
最近学习了一下SQL的分页查询,总结了以下几种方法. 首先建立了一个表,随意插入的一些测试数据,表结构和数据如下图: 现在假设我们要做的是每页5条数据,而现在我们要取第三页的数据.(数据太少,就每页5条了) 方法一: select top 5 * from [StuDB].[dbo].[ScoreInfo] where [SID] not in (select top 10 [SID] from [StuDB].[dbo].[ScoreInfo] order by [SID]) order by
-
mysql oracle和sqlserver分页查询实例解析
最近简单的对oracle,mysql,sqlserver2005的数据分页查询作了研究,把各自的查询的语句贴出来供大家学习..... (一).mysql的分页查询 mysql的分页查询是最简单的,借助关键字limit即可实现查询,查询语句通式: selecto.*from(sql)o limit firstIndex,pageSize 如下面的截图,每页显示的记录数为20: 查询(1-20)这20条记录 查询(21-40)这20条记录 mysql的分页查询就这么简单...... (二).sqls
-
JQuery+Ajax实现数据查询、排序和分页功能
之前很少会用javascript去实现页功能主要怕麻烦,但了解JQuery后这种想法发生了变化:有了这样的脚本组件就可以在编写脚本时方便和HTML隔离出来,这样编写高重用性的脚本就更方便.下面就是介绍在学习JQuery过程中编写的基于Ajax的数据查询.排序和分页功能的复用脚本,只要遵循脚本的某些规则描述HTML把脚本文件引入就可以方便实现以上描述的功能. 先看下实现功能的代码: /**应用脚本规则: 引用脚本: JQuery脚本和JQuery的form插件脚本 Form的ID: viewfor
-
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
1.首先做主页面Ajax_pag.php 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax做分页</title> <script src="bootstrap/js/jquery-1.11.2.min.js"></script> <script src="Ajax_