怎么用smarty+php+ajax实现简单无刷新分页功能
admin
2023-07-01 10:44:43
0

    简介

    分页,无非就是从数据库中获得我们想查询的数据,再加以处理即可!

    ① 确定数据总数($count)

    ② 每页显示数据条数($pageSize)

    ③ 分多少页($pageCount)

    ④ 上一页($pagePrev)

    ⑤ 下一页($pageNext)

    ⑥ 判断越界问题

    ⑦ 偏移量($offset)

    ⑧ sql语句($sql = "select * from goods limit $offset,$pageSize";)

    简单归简单,我们还得考虑实际的应用。例如:如果你正在土豆网看《火影忍者》,下面一个评论吸引了你,你点击“下一页”后整个页面都刷新,我勒个去,《火影忍者》也刷没了,只能再从头开始看,这样的情况是不是令你十分厌恶。再想想,如果当你点击“下一页”时,只有评论的部分刷新,你的视频根本没有受到影响,那是不是很完美呢!

    想要无刷新,第一个想到Ajax;前台都是HTML+JS,后台php+smarty组合,那我们就直接进入主题:

    

    文件结构

    怎么用smarty+php+ajax实现简单无刷新分页功能

    ① 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



    
        
        无刷新分页
        
        
        function display(page){
            $.get('page.php','page='+page,function(msg){
                $('content').innerHTML = msg;
            });
        }
        window.onload = function(){
            display(1);
        };
        
    
    
    
        
    

    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

 $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



 
        *{
            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;
        }


    
        序号
        商品名称
        商品价格
        商品数量
    
    {foreach from = $data item = 'value'}
    
        {counter}
        {$value['goods_name']}
        {$value['goods_price']}
        {$value['goods_number']}
    
    {/foreach}
        
        
        共{$count}条数据
        共{$pageCount}页
        当前第{$page}页
        首页
        上一页
        下一页
        末页
        
    

    最后的分页效果:

    怎么用smarty+php+ajax实现简单无刷新分页功能

相关内容

热门资讯

国际原子能机构:扎波罗热核电站... 当地时间5月30日,国际原子能机构表示,该机构在扎波罗热核电站的团队已要求进入现场,以第一手方式检查...
燃气灶热电偶熄火保护工作原理是... 燃气灶热电偶熄火保护工作原理是什么啊?工作原理如下:当燃具的火焰熄灭的时候,会导致热电偶产生电流下降...
新买燃气灶自动熄火是什么原因 燃气灶熄火原因有很多种,建议先检查一下燃气阀门和灶具的电池是否有问题。管道堵塞:一般情况下,燃气灶管...
新燃气灶有塑料味怎么回事 如果不是点火针的问题,那就看看是不是电池没电或松动了。把燃气灶翻过来,底部一个小盒就是放电池的地方,...
天燃气灶为什么会自动熄火 原因可能是分火盖的小孔被堵住了,这也会引起燃气灶打不着火。发现是分火盖的问题,需要做的是:将分火盖取...
燃气灶为什么开着会自动熄火 问题:燃气灶为什么开着会自动熄火回答:原因是燃气不充足,电池也有问题,不过还是要具体情况具体分析一下...
童真璀璨 喜迎“六一” ↑ 5月29日,湖北省宜昌市秭归县实验小学学生在“花开新时代 童心向未来”为主题的“迎六一”活动中朗...
中方代表:日本没资格在国际场合... 据凤凰卫视报道,5月30日,中国人民解放军专家学者代表团团长、国防大学教授孟祥青在香格里拉对话会的平...
新华每日电讯:稻城亚丁收的什么... 原标题:生态保护、公共权益、文旅发展如何平衡——稻城亚丁景区“道路设卡摆渡收费”调查本报记者 吴光于...
美国这次,真没占到任何便宜 看来,美国这次,真没占到任何便宜。我之前说过,美国重新定义了什么是“自卫”、什么是“停火”,现在是美...