一、使用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:[ ...
随机推荐
-
RFC4035笔记
章 节 标题 说明 补充说明 支持级别 1 介绍 1.定义DNSSEC协议修改点2.定义以下概念:已签名域(signed zone)和域签名的要求列表3.描述权威域名服务器为了处理签名域的行为变化4. ...
-
跟着百度学PHP[4]OOP面对对象编程-14-克隆对象__clone()方法
$b=clone ($a) #克隆a对象. <?php class Human { private $name; private $sex; private $age; function __c ...
-
[Hyper-V]在Windows 8.1 操作系统中启用Hyper-V功能
描述: 如何在Windows 8.1 操作中启用Hyper-V功能 实现步骤: 1,安装Hyper-V 1 打开Control Panel,点击Progress 2 点击Turn Windows fe ...
-
MEF 编程指南（六）：导出和元数据
声明导出解释了部件导出服务的基础知识和价值观(Values).有时候出于种种原因,导出关联信息是非常必要的.通常,用于解释关于功能公共契约的具体实现.允许导入满足约束要求的导出,或者导入所有可用的实现 ...
-
Hibernate 多对一关系中，在多的一方进行数据的插入
先看两个映射关系: 部门: <?xml version="1.0"?> <!DOCTYPE hibernate-mapping PUBLIC "-//H ...
-
css兼容性问题
其实做网页最大的问题还是兼容性吧,要调试IE的各种浏览器. DIV+CSS设计IE6.IE7.FF 兼容性 DIV+CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV+CSS网站设 ...
-
关于Symfony2+nginx搭建过程总结
关于Symfony2+nginx搭建过程总结 最近在试着用nginx+symfony搭建公司的网站,由于nginx不支持pathinfo模式,所以必须修改nginx(我使用的是nginx1.5.1)的 ...
-
现在越来越喜欢用ajax传值了，这样能让网站的体验性很好，今天就总结了一下常用的
这是不用循环的方法 就是传过来的是一位数组 //编辑党建分类 function gk_bj(id){ $.post("{:U('Luser/lei_edlt')}",{id:id} ...
-
Sort An Unsorted Stack
Given a stack of integers, sort it in ascending order using another temporary stack. Examples: Input ...
- 2018-11-26 BIG DATA ANALYSIS