溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么用smarty+php+ajax實現簡單無刷新分頁功能”，在日常操作中，相信很多人在怎么用smarty+php+ajax實現簡單無刷新分頁功能問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用smarty+php+ajax實現簡單無刷新分頁功能”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
簡介
分頁，無非就是從數據庫中獲得我們想查詢的數據，再加以處理即可！
① 確定數據總數($count)
② 每頁顯示數據條數($pageSize)
③ 分多少頁($pageCount)
④ 上一頁($pagePrev)
⑤ 下一頁($pageNext)
⑥ 判斷越界問題
⑦ 偏移量($offset)
⑧ sql語句($sql = "select * from goods limit $offset,$pageSize";)
簡單歸簡單，我們還得考慮實際的應用。例如：如果你正在土豆網看《火影忍者》，下面一個評論吸引了你，你點擊“下一頁”后整個頁面都刷新，我勒個去，《火影忍者》也刷沒了，只能再從頭開始看，這樣的情況是不是令你十分厭惡。再想想，如果當你點擊“下一頁”時，只有評論的部分刷新，你的視頻根本沒有受到影響，那是不是很完美呢！
想要無刷新，第一個想到Ajax;前臺都是HTML+JS,后臺php+smarty組合，那我們就直接進入主題：
文件結構
① Smarty模板文件 官網地址：http://www.smarty.net/
② /templates 自定義的文件夾 page.htpl模板文件，用于存放分頁數據及鏈接
③ page.html 前臺顯示頁面 js觸發
④ page.php 數據庫處理 smarty數據處理
⑤ public.js Ajax對象的封裝
程序流程
① 前端page.html傳遞page參數（不傳遞后臺頁面也會默認賦值）
（前端主要的作用：顯示、發出Ajax請求）
② php頁面數據庫操作，$sql分頁語句查詢出分頁所需的數據
③ 載入smarty模板，將參數assign傳遞到page.htpl模板頁
④ 模板頁導入數據、遍歷數據 將上、下頁加入超鏈接及js事件
⑤ smarty fetch()方法讀取模板頁數據 賦值給變量 變量再響應給Ajax客戶端
⑥ 前臺接收
代碼
page.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無刷新分頁</title>
<script language="javascript" src="public.js"></script>
<script language="javascript">
function display(page){
$.get('page.php','page='+page,function(msg){
$('content').innerHTML = msg;
});
}
window.onload = function(){
display(1);
};
</script>
</head>
<body>
<div id="content"></div>
</body>
</html> public.js
(function(){
//1、用于得到一個DOM元素
//定義了一個$函數 作用域有局部
var $ = function(id){
return document.getElementById(id);
};
//2、用于得到一個Ajax對象
//將$看作函數對象，init為屬性，值為函數體
$.init = function(){
try{return new XMLHttpRequest()}catch(e){}
try{return new ActiveXObject('Microsoft.XMLHTTP')}catch(e){}
alert('請更改新瀏覽器！');
};
//用于發送Ajax get請求 $.get = function(url,data,callback,type){
var xhr = $.init();
if (data != null){//傳遞參數、只發出請求
url = url+'?'+data;
}
xhr.open('get',url);
xhr.setRequestHeader('If-Modified-Since','0');//解決get緩存問題
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200){
//當沒有指定傳值類型時，默認為字符串
if (type == null){
type = 'text';
}
//判斷語句指定三種接收形式
if (type == 'text'){
callback(xhr.responseText);
}
if (type == 'xml'){
callback(xhr.responseXML);
}
if (type == 'json'){
callback(eval("("+xhr.responseText+")"));
}
}
};
xhr.send(null);}; //增大其作用域全局變量 window方法的$屬性 賦值為$ 閉包寫法 window.$ = $; })();
page.php
<?php mysql_connect('localhost','root','111111'); mysql_select_db('shop'); mysql_query('set names gb2312'); //為查詢結果增加新字段 num $sql = "select * from sw_goods"; $result = mysql_query($sql); $count = mysql_num_rows($result);//獲得總行數，與mysql_num_rows()類似 $page = isset($_GET['page'])?$_GET['page']:1;//獲取當前頁碼，默認1 $pageSize = 5;//頁尺寸 每頁顯示多少條數據 $pageCount = ceil($count/$pageSize);//計算總頁面 $pagePrev = $page - 1;//上一頁頁碼 $pageNext = $page + 1;//下一頁頁碼 if ($pagePrev < 1) $pagePrev = 1; //判斷頁碼越界 if ($pageNext > $pageCount) $pageNext = $pageCount; if ($page < 1) $page = 1; //判斷當前頁頁碼越界 if ($page > $pageCount) $page = $pageCount;
$offset = ($page -1)*$pageSize; //偏移量
//相對于當前頁來講的
$sql = "select * from sw_goods limit $offset,$pageSize"; //order by id asc 默認/desc
$result = mysql_query($sql);//查詢那一頁的結果集
$num = mysql_num_rows($result);
$data = array();
for ($i=0;$i<$num;$i++){
//遍歷五次，每次獲得一個數組array('good_id'=>'','goods_name'=>'','goods_price'=>'')
//形成一個二維數組
$data[] = mysql_fetch_assoc($result);
}
mysql_close();
//***************************************************************************
include('Smarty/Smarty.class.php');
$smarty = new Smarty();
$smarty -> assign('data',$data);
$smarty -> assign('count',$count);
$smarty -> assign('pageCount',$pageCount);
$smarty -> assign('page',$page);
$smarty -> assign('pagePrev',$pagePrev);
$smarty -> assign('pageNext',$pageNext);
$smarty -> assign('pageCount',$pageCount);
$str = $smarty -> fetch('page.htpl');//獲取模板里面的數據，賦值給變量，再傳遞給Ajax 對象
header("content-type:text/html;charset=gb2312");
echo $str; page.htpl
<!--htpl是當作模板來用的擴展名-->
<!--分頁模板-->
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body{
text-align:center;
}
table{
width:650px;
margin:0px auto;
margin-top:20px;
}
tr{
background-color:#ffffff;
height:30px;
font-size:12px;
}</style>
<table cellspacing="1" cellpadding="4" bgcolor="#336699">
<tr>
<td>序號</td>
<td>商品名稱</td>
<td>商品價格</td>
<td>商品數量</td>
</tr>
{foreach from = $data item = 'value'}
<tr>
<td>{counter}</td>
<td>{$value['goods_name']}</td>
<td>{$value['goods_price']}</td>
<td>{$value['goods_number']}</td>
</tr>
{/foreach} <tr>
<td colspan = '4'>
共{$count}條數據
共{$pageCount}頁
當前第{$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> 最后的分頁效果：
到此，關于“怎么用smarty+php+ajax實現簡單無刷新分頁功能”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
