ajax实现分页查询功能
时间:2019-03-30
本文章向大家介绍ajax实现分页查询功能,主要包括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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- iOS引入JavaScriptCore引擎框架(二)
- Java基础-03(01).总结运算符、键盘录入、if语句
- 使用git恢复未提交的误删数据
- Java web图片上传和文件上传
- 通过java程序模拟实现地铁票价2+2=12(r3笔记第94天)
- 由objC运行时所想到的。。。
- tensorflow系列笔记:流程,概念和代码解析
- node实现watcher的困境
- Java基础-03(02).总结运算符、键盘录入、if语句
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(十一)数据层优化-druid监控及慢sql记录
- python数据分析师面试题选
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(九)数据层优化-jdbc连接池简述、druid简介
- webpack配置别名alias出现的错误匹配
- 在Java程序中处理数据库超时与死锁
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 消息队列的消费幂等性如何保证
- js中数组Array.reduce方法介绍及使用场景
- 推荐一套基于go开发的文档管理系统
- 如何通过容器搭建稳定可靠的私有网盘(NextCloud)
- Flutter实现倒计时功能
- Excelize 2.3.0 发布, Go 语言 Excel 基础库
- 网站渗透攻防Web篇之SQL注入攻击高级篇
- 网站渗透攻防Web篇之SQL注入攻击中级篇
- Go 语言学习之 method
- 网站渗透攻防Web篇之SQL注入攻击初级篇
- VBA解析复合文档05——读取数据流
- C++核心准则E.25:如果不能抛出异常,模仿RAII方式进行资源管理
- VBA解析复合文档06——改写数据流
- PyTorch5:torch.nn总览&torch.nn.Module
- 玩转Spring中强大的spel表达式!