一、使用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>
搜索功能代码