ajax实现分页查询功能

ajax分页查询功能的具体代码,供大家参考,具体内容如下

显示的效果如下:

实现效果的代码如下:

1.fenye.php

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="external nofollow" />
<script src="../jquery-3.2.0.min.js"></script>
<script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

<style type="text/css">

.list:hover{ cursor:pointer}
#prev:hover{ cursor:pointer}
#next:hover{ cursor:pointer}

</style>
</head>

<body>
<div class="page-header">
<h1>AJAX分页</h1>
</div>

<div>名称:<input type="text" id="name" /> <button type="button" class="btn btn-info btn-xs" id="chaxun">查询</button></div>
<br />
<table width="100%" class="table table-hover">

 <tr>
  <td>代号</td>
  <td>名称</td>
 </tr>

 <tbody id="shuju">

 </tbody>

</table>

<br />
<ul class="pagination" id="xinxi"></ul>

</body>
<script type="text/javascript">
//代表当前页
var page = 1;
//每页显示几条
var num = 5;

//加载数据
Load();

//加载分页列表
LoadFenYe();

//加载数据的方法
function Load()
{
 var name = $("#name").val();
 $.ajax({
  url:"chuli.php",
  data:{page:page,num:num,name:name},
  type:"POST",
  dataType:"JSON",
  success: function(data){
   var str = "";
   for(var k in data)
   {
    str = str + "<tr><td>"+data[k].code+"</td><td>"+data[k].nno+"</td></tr>";
   }
   $("#shuju").html(str);
  }
 });
}

//加载分页信息
function LoadFenYe()
{
 //存储所有分页信息的代码
 var s = "";
 var name = $("#name").val();
 //加载上一页
 s = "<li><a id='prev'>«</a></li>";

 //加载列表
 var zts = 0;
 $.ajax({
  async:false,
  data:{name:name},
  type:"POST",
  url:"zongtiaoshu.php",
  dataType:"TEXT",
  success: function(data){
   zts = data;
  }

 });

 //求总页数
 var zys = Math.ceil(zts/num);
 //为了防止出错
 page = parseInt(page);
 for( var i=page-2;i<page+3;i++)
 {
  if(i>0 && i<=zys)
  {
   if(i==page)
   {
    s = s+"<li class='active'><a ys='"+i+"' class='dangqian'>"+i+"</a></li>";
   }
   else
   {
    s = s+"<li><a ys='"+i+"' class='list'>"+i+"</a></li>";
   }

  }
 }

 //加载下一页
 s = s+"<li><a id='next'>»</a></li>";

 $("#xinxi").html(s);

 //给上一页加事件
 $("#prev").click(function(){
  page = parseInt(page);
  if(page>1)
  {page--;}

  //重新加载数据
  Load();
  //重新加载分页信息
  LoadFenYe();
 })
 //给下一页加事件
 $("#next").click(function(){
  page = parseInt(page);
  if(page<zys)
  {page++;}

  //重新加载数据
  Load();
  //重新加载分页信息
  LoadFenYe();
 })

 //给列表加事件
 $(".list").click(function(){
  page = parseInt($(this).attr("ys"));
  //重新加载数据
  Load();
  //重新加载分页信息
  LoadFenYe();
 })
}

$("#chaxun").click(function(){
 //重新加载数据
 Load();
 //重新加载分页信息
 LoadFenYe();
})

</script>
</html>

2.chuli.php

<?php
$page = $_POST["page"];
$num = $_POST["num"];
$name = $_POST["name"];

require "../DBDA.class.php";

$db = new DBDA();

$tguo = ($page-1)*$num;

$sql = "select * from nation where nno like '%{$name}%' limit {$tguo},{$num}";

echo $db->jsonquery($sql);

3.zongtiaoshu.php

<?php
$name = $_POST["name"];
require"../DBDA.class.php";
$db = new DBDA();
$sql ="select count(*) from nation where nno like '%{$name}%'";
echo $db->strquery($sql);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-05-20

jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)

select2是一款jQuery插件,是普通form表单select组件的升级版. 可以定制搜索.远程数据集(Remote data,本篇主要介绍点).无限滚动(数据分页功能,这一点很妙).还有很多高端的参数设置(有需要的下次介绍). 内置了40种国际化语言,不过这里我们只需要用到中文. 同时支持现代和传统浏览器内置,甚至包括惹人不高兴的IE8. 那么,现在让我们开始一段select2的奇幻之旅吧! 一.惊艳的效果,来一睹为快吧 本地实战结果 二.导入css和js到网站上 1.使用CDN,节省自

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,而是用其他的方法,肯定是要刷新页面的,用户体检很不好, 所以最好使用Ajax的方法写分页查询: 1.先来找一张数据很多的表吧! 一张简单的表 代码,引入jquery包: <script src="jquery-1.11.2.min.js"></script> 写一张表格,显示我们的代号跟名称: <table class="table table-striped&

JQuery+Ajax实现数据查询、排序和分页功能

之前很少会用javascript去实现页功能主要怕麻烦,但了解JQuery后这种想法发生了变化:有了这样的脚本组件就可以在编写脚本时方便和HTML隔离出来,这样编写高重用性的脚本就更方便.下面就是介绍在学习JQuery过程中编写的基于Ajax的数据查询.排序和分页功能的复用脚本,只要遵循脚本的某些规则描述HTML把脚本文件引入就可以方便实现以上描述的功能. 先看下实现功能的代码: /**应用脚本规则: 引用脚本: JQuery脚本和JQuery的form插件脚本 Form的ID: viewfor

ajax实现分页和分页查询

之前有写过ajax的加载页面,是非常简单的,而且不需要重新刷新页面,写起来也是非常的方便,今天写的分页是不用封装page.class.php的,是单纯的js和ajax写出来的 首先为了页面的整齐与美观,我用到了bootstrap,需要引进所需要的文件包 <link href="dist/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="tex

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

AJAX +SpringMVC 实现bootstrap模态框的分页查询功能

一 .效果图 二.JS function getManagerList(dealerId,page2){ macAddress = document.getElementById("activeXDemo").getMac(); $.get("${ctxPath}/common/dealer/manager?"+Math.random(), { page2: page2, pageSize2: 9, dealerId: dealerId, macAddress:ma

ajax的分页查询示例(不刷新页面)

既然是分页查询,那么就要有张数据很多的表,可以让它进行分页显示,用普通的方法进行分页查询必然是要刷新页面的,这里要实现不刷新页面进行分页显示数据,就要用到ajax方式.进行编写代码 (1)先写个显示数据的页面,分页查询需要那几个部分呢? 1.首先是查询的文本框输入,还有查询按钮,那么就开始写代码吧 <div> <input type="text" id="key" /> //输入查询字的文本框 <input type="but

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_

BootStrap mvcpager分页样式(get请求,刷新页面)

使用方法: 先把mvcpager.dll引用加入mvc项目中. 前台代码 前台: @{ Layout = null; } @using Webdiyer.WebControls.Mvc @model PagedList<string> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <

IntelliJ IDEA中ajax开发实现分页查询示例

JavaEE三层架构实现ajax分页查询 开发环境: 系统 window10 IDE:IntelliJ IDEA2017.3.2 数据库:MySQL5.5 数据库连接工具: Navicat 浏览器:chrome 版本号 65.0.3325.181 第一步:代码实现之前期准备 在IDEA中开发前期配置的工作,网上的帖子很多,我 在这里就不再赘述.主要说三点 在服务器的配置中,红色框框的两项要选择update classes and resource ,选择了之后可以实现热部署. 要在此处填写项目的

Ajax+php数据交互并且局部刷新页面的实现详解

什么是Ajax? 国内翻译常为"阿贾克斯"和阿贾克斯足球队同音,AJAX 是一种用于创建快速动态网页的技术,他不是新语言,而是一种使用现有标准的新方法.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,这样就可以在不重新加载整个网页的情况下,对网页的某部分进行更新. XMLHttpRequest 是 AJAX 的基础,用于和服务器交换数据.所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject) 下面这篇文章主

thinkPHP5框架实现基于ajax的分页功能示例

本文实例讲述了thinkPHP5框架实现基于ajax的分页功能.分享给大家供大家参考,具体如下: 最近一个页面的选项卡又牵扯到ajax分页,所以研究了一下tp5的ajax分页使用方法 首先看一下tp5的分页功能介绍 参数 描述 list_rows 每页数量 page 当前页 path url路径 query url额外参数 fragment url锚点 var_page 分页变量 type 分页类名 $caseDetails = CaseDetails::where(['status'=>1])

使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例

使用bootstrap-paginator.js 分页来进行ajax 异步分页请求 具体的做法如下 : 首先定义一个异步提交请求的ajax 函数,其完整的函数如下: var nid= $("#lbnid").val(); // 获取当前新闻编号 var cpage = 1; // 当前页面号 var tpage = 10; // 总页面数 function getPaging() { getComment(cpage); //获取新闻评论 } //点击查看新闻评论 $("#o

spring data jpa分页查询示例代码

最近项目上用就hibernate+spring data jpa,一开始感觉还不错,但是随着对业务的复杂,要求处理一些复杂的sql,就顺便研究了下,把结果记录下,以便日后查看.用到Specification,需要继承JpaSpecificationExecutor接口.(下面代码有的分页从0开始作为第一页,有的从1开始作为作为第一页,我也忘记,请自己测试) DAO层: import java.util.List; import org.springframework.data.domain.Pa