ajax分页效果、分类联动、搜索功能
一、使用smarty+ajax+php实现无刷新分页效果
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax分页</title>
<style>
table{
border-collapse: collapse;
width:700px;
height:300px;
margin:0 auto;
text-align: center;
}
tr,td{
border:1px solid #ccc;
}
a{
margin-left:10px;
text-decoration: none;
}
</style>
<script src="../js/jquery-1.12.4.min.js"></script>
<script src="newpublic.js"></script>
<script>
$(function(){
//页面载入后查看第一页的数据
display(1);
//取得第page页数据
function display(page){
//page:页码
$.get("page.php","page="+page,function(result){
$("#content").html(result);
})
}
})
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
分页html代码
<?php
//禁止客户端缓存数据
header("Cache-Control:no-cache,must-revalidate");
//连接数据库服务器、选择数据库
mysql_connect("localhost","root","111111");
mysql_select_db("shop");
mysql_query("set names gb2312");
//sql语句
$sql = "select count(*) as num from category ;
$result =mysql_query($sql);
//遍历结果集
$row =mysql_fetch_assoc($result)
//count总行数
$count = mysql_num_rows($result);
$pageCurrent = isset($_GET['page'])?$_GET['page']:1;//获取当前页码
$pageSize =5;//每页显示多少条数据
$pageCount = ceil($count/$pageSize);//计算总页数
$pagePrev = $pageCurrent-1;
$pageNext = $pageCurrent+1;
//判断页码越界
if($pagePrev<1){
$pagePrev = 1;
}
if($pageNext>$pageCount){
$pageNext = $pageCount;
}
//判断当前页码越界
if($pageCurrent<1){
$pageCurrent= 1;
}
if($pageCurrent>$pageCount){
$pageCurrent = $pageCount;
}
//偏移量
$offset = ($pageCurrent-1)*$pageSize;
$sql ="select * form category order by id desc limit $offset,$pageSize";
$result = mysql_query($sql);
$num = mysql_num_rows($result);
$data= array();
for($i=0;$i<$num;$i++){
$data[] = mysql_fetch_assoc($result);
}
mysql_close();
//引入smarty
include('Smarty/smarty.class.php');
$smarty =new Smarty();
$smarty->assign('data',$data);
$smarty->assign('count',$count);
$smarty->assign('pageCurrent',$pageCurrent);
$smarty->assign('pageCount',$pageCount);
$smarty->assign('pagePrev',$pagePrev);
$smarty->assign('pageNext',$pageNext);
$smarty->assign('pageSize',$pageSize);
str =smarty->fetch('page.htpl');
header('Content-Type:text/html;charset=gb2312');
echo str;
?>
分页php代码
<table>
<tr>
<td>序号</td>
<td>分类名</td>
<td>描述</td>
</tr>
{foreach form=$data item='value'}
<tr>
<td>{counter}</td>
<td>{$value['name']}</td>
<td>{$value['content']}</td>
</tr>
{/foreach}
<tr>
<td colspan='3'>
共{$count}条数据
共{$pageCount}页
每页{$pageSize}条
当前第{$page}页
<a href="#" onclick="display(1);">首页</a>
<a href="#" onclick="display({$pagePrev});">上一页</a>
<a href="#" onclick="display({$pageNext});">下一页</a>
<a href="#" onclick="display({$pageCount});">尾页</a>
</td>
</tr>
</table>
smart之page.htpl
二、分类联动
相关代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分类联动</title>
<style>
form{
width:600px;
margin:50px auto;
display: flex;
}
form div{
margin-left:20px;
}
select{
width:200px;
height:36px;
padding:0 15px;
}
</style>
<script src="../js/jquery-1.12.4.min.js"></script>
<script src="public.js"></script>
<script>
$(function(){
//填充省份内容
province();
//每次省份改变，显示对应的城市
$("#province").change(function(){
city();
});
function province(){
var province = "";
$.get("kind.php",'cid=0',function(result){
//第二种方式
for(var j=0;j<result.length;j++){
//创建option元素
var op = new Option(result[i].name,result[i].id);
$("#province").options.add(op);
} },'json');
}
function city(){
if($("#province").val() == 0){
return false;
}
//每次值改变，清空上次城市的值
$("#city").children().remove();
$.get("kind.php",'cid='+$("#province").val(),function(result){
var city="<option value='0'>请选择城市</option>";
for(var i=0;i<result.length;i++){
city +="<option value='"+result[i].id+"'>"+result[i].name+"</option>";
}
$("#city").append(city);
},'json')
}
})
</script>
</head>
<body>
<form>
<div>
<label for="province">省：</label>
<select name="province" id="province">
<option value="0">请选择省份</option>
</select>
</div>
<div>
<label for="city">市：</label>
<select name="city" id="city">
<option value="">请选择城市</option>
</select>
</div>
</form> </body>
</html>
分类联动
<?php
//禁止客户端缓存数据
header("Cache-Control:no-cache,must-revalidate");
$cid = $_GET['cid'];
//连接数据库服务器、选择数据库
mysql_connect("localhost","root","111111");
mysql_select_db("shop");
mysql_query("set names gb2312");
//sql语句
$sql = "select * from kind where cid = '$cid' order by id desc";
$result =mysql_query($sql);
$num = mysql_num_rows($result);
$data =array();
for($i=0;$i<$num;$i++){
$row = mysql_fetch_assoc($result);
$row['name'] = iconv('gb2312','utf-8',$row['name']);
$data[] = $row;
}
mysql_close();
echo json_encode($data); ?>
分类联动php代码
三、搜索功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
.con{
width:400px;
margin:50px auto;
font-size: 0;
}
.con input{
width:270px;
height:6px;
padding:15px;
}
.con button{
width:96px;
height:40px;
line-height:40px;
border:none;
font-size:14px;
padding: 0;
background:#3385ff;
border-bottom:1px solid #2d78f4;
color:#fff;
}
.search_content{
font-size:14px;
border:1px solid #ccc;
margin-top:-1px;
display: none;
}
.search_content li{
padding: 2px 15px;
margin-top:5px;
}
.search_content li:nth-child(1){
margin-top: 0;
}
.search_content li:hover{
background:#cccccc;
cursor: pointer;
}
</style>
<script src="../js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$("#search").keyup(function(){
var keyword = $(this).val();
//使用$.trim()方法去除字符串两端的空白字符
if($.trim(keyword).length == 0){
return false;
}
$.ajax({
url:"https://sug.so.360.cn/suggest?",
type:"get",
dataType:"jsonp",
data:{word:keyword}
}).done(function(data){
if(data.p == true){
var str = "";
if(data.s.length>0){
for(var i=0;i<data.s.length;i++){
str +="<li>"+data.s[i]+"</li>";
}
$(".search_content").html(str);
$(".search_content").show();
}else{
$(".search_content").html(str);
$(".search_content").hide();
} }
console.log(data)
}).fail(function(error){
console.log("error");
})
});
$(".search_content").delegate("li","click",function(){
$("#search").val($(this).html());
$(this).parent().hide();
})
})
</script>
</head>
<body>
<div class="con">
<input id="search" type="text" placeholder="请输入内容">
<button>搜索</button>
<ul class="search_content"></ul>
</div>
</body>
</html>
搜索功能代码
ajax分页效果、分类联动、搜索功能的更多相关文章
- ajax分页效果实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 原生javascript实现分页效果+搜索功能
一.概述 首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要. ...
- 利用ajax实现分页效果
在网页中看到的分页效果,想一下就点击分页中的内容的时候,然后调用ajax调出对应的数据,正确的显示在相应的标签内. 1.用html实现正确的样式和结构 2.采用jquery中的ajax调出数据. 需要 ...
- thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
- ajax实现无刷新分页效果
基于jquery.pagination.js实现的无刷新加载分页数据效果. 简介与说明 * 该插件为Ajax分页插件,一次性加载数据,故分页切换时无刷新与延迟.如果数据量较大,加载会比较慢. * 分页 ...
- （三）微信小程序首页的分类功能和搜索功能的实现笔记
就在昨天,微信宣布了微信小程序开发者工具新增“云开发”功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜索功能的效果图 1.首页分类功能的实现 boxtwo方法(.js ...
- ngTbale真分页实现排序、搜索等功能
一. 真分页表格基础 1. 需求:分页,排序,搜索都是需要发API到服务端. 2. JS实现代码: getStorage是localStorage一个工具方法,可以自己写这个方法. API参数如下: ...
- 使用ajax实现搜索功能
最近要做一个搜索功能,网上搜了一圈,终于做出来了,很简单的一个,这里分享我的方法,希望对大家有用,不足之处还请指教. 这里使用ajax提交数据,配合jquery将数据显示出来. 用jq的keyup ...
- Vue下简单分页及搜索功能
最近利用Vue和element ui仿写了个小页面,记一哈分页和搜索功能的简单实现. 首页 emmmm..... 搜索框输入..... 搜索完成 数据是直接写在这里面的: cardPhoto:[ ...
随机推荐
- JDBC 数据库连接操作——实习第三天
今天开始了比较重量级的学习了,之前都是对于Java基础的学习和回顾.继续上篇的话题,<谁动了我的奶酪>,奉献一句我觉得比较有哲理的话:"学会自嘲了,而当人们学会自嘲,能够嘲笑自己 ...
- 【解决】VS2013 + Qt 5.7(5.6适用)使用QSqlDatabase出现“无法解析的外部符号"错误
原始日期: 2016-08-03 22:09 错误如下: error LNK2019: 无法解析的外部符号 "__declspec(dllimport) public: __thiscal ...
- word和.txt文件转html 及pdf文件， 使用poi jsoup itext心得
word和.txt文件转html 及pdf文件, 使用poi jsoup itext心得本人第一次写博客,有上面不足的或者需要改正的希望大家指出来,一起学习交流讨论.由于在项目中遇到了这一个问题,在 ...
- Python读入CIFAR-10数据库
CIFAR-10可以去http://www.cs.toronto.edu/~kriz/cifar.html下载(记得下载python格式) CIFAR-10数据组成: 训练集和测试集分别有50000和 ...
- CUDA零内存拷贝 疑问考证
今天思考了一下CUDA零内存拷贝的问题,感觉在即将设计的程序中会派上用场,于是就查了一下相关信息. 以下是一些有帮助的链接: cuda中的零拷贝用法--针对二维指针 cuda中的零拷贝用法--针对一维 ...
- Ext秒表
Ext秒表 显示分和秒 js Ext.define('xy.StopWatchWindow', { extend: 'Ext.window.Window', width: 300, modal: tr ...
- AJAX学习笔记（一）基础知识
一.HTTP协议 1.HTTP: 计算机通过网络进行通讯的规则,用于浏览器向服务器发送请求. 2.HTTP是一种无状态的协议,无状态是指服务器端不保留任何连接相关的信息,浏览器客户端向服务器发送请求, ...
- vsftpd3.0之匿名用户配置
有时候工作中为了方便上传下载文件,又不想在系统中添加用户并为用户创建密码,这时候就可以用匿名用户方式搭建FTP服务器,当然安全性我们不说,今天就为实现这么个简单而粗爆的FTP服务器,来看看都需要哪些配 ...
- java IO之 序列流 集合对象Properties 打印流 流对象
序列流 也称为合并流. SequenceInputStream 序列流,对多个流进行合并. SequenceInputStream 表示其他输入流的逻辑串联.它从输入流的有序集合开始,并从 第一个输入 ...
- JavaWeb 后端 <十三> 之 监听器 JSTL国际化
1. 监听器 1.1 概述 监听器: 主要是用来监听特定对象的创建或销毁.属性的变化的! 是一个实现特定接口的普通java类! 对象: 自己创建自己用 (不用监听) 别人创建自己用 (需要监听) ...