PHP+jQuery寥寥几行代码轻松实现百度搜索那样的无刷新PJAX的分页列表和导航链接

Stella981
• 阅读 571

PHP+jQuery寥寥几行代码轻松实现百度搜索那样的无刷新PJAX的分页列表和导航链接
PHP寥寥几行代码轻松实现百度搜索那样的分页列表和导航链接,某些语言的拥趸哭晕在厕所.

<?php

$app = array(
    'db_prefix' => 'phpbest_',
    'db_sqlite' => '/dev/shm/phpbest/phpbest.db3',
);

//数据库连接单例
function db() {
    global $app;
    static $db;
    if($db) {
        return $db;
    } else {
        try {
            $db = new PDO('sqlite:'.$app['db_sqlite']);
        } catch(PDOException $e) {
            echo $e->getMessage();
            exit();
        }
        return $db;
    }
}

//分页导航链接
function page_nav($page, $page_size = 10, $before = 5, $after = 4) {
    $page = intval($page);
    $page_size = intval($page_size);
    global $app;
    $db = db();
    $table = $app['db_prefix'].'post';
    $arr = $db->query("SELECT count(id) FROM $table")->fetchAll(PDO::FETCH_NUM);
    $records = $arr[0][0]; //记录数
    $pages = ceil($records/$page_size); //页数
    if($pages == 0) return;
    if($page <= 0 || $page > $pages) return;
    
    $html = '<p>当前页:前输出5页,后输出4页</p>';
    $html .= '<a href="?page=1">最前</a>';
    if($page != 1) { $html .= '<a href="?page='.($page - 1).'">上一页</a>'; }
    if($page <= $before) { for($i = 1; $i < $page; $i++) { $html .= '<a href="?page='.$i.'">第'.$i.'页</a>'; } }
    else { for($i = $page - $before; $i < $page; $i++) { $html .= '<a href="?page='.$i.'">第'.$i.'页</a>'; } }
    $html .= '<a href="?page='.$page.'">第'.$page.'页(当前页)</a>';
    if($pages >= $page + $after) { for($i = $page + 1; $i <= $page + $after; $i++) { $html .= '<a href="?page='.$i.'">第'.$i.'页</a>'; } }
    else { for($i = $page + 1; $i <= $pages; $i++) { $html .= '<a href="?page='.$i.'">第'.$i.'页</a>'; } }
    if($page != $pages) { $html .= '<a href="?page='.($page + 1).'">下一页</a>'; }
    $html .= '<a href="?page='.$pages.'">最后</a>';
    return $html;
}

//分页列表内容
function page_list($page, $page_size = 10) {
    $page = intval($page);
    $page_size = intval($page_size);
    global $app;
    $db = db();
    $table = $app['db_prefix'].'post';
    $offset = ($page - 1) * $page_size;
    return $db->query("SELECT * FROM $table ORDER BY id DESC LIMIT $page_size OFFSET $offset")->fetchAll(PDO::FETCH_ASSOC);
}

?>

<div class="content pjax">
    <?php echo page_nav($_GET['page'], 2); ?>
    <ul>
    <?php
        foreach(page_list($_GET['page'], 2) as $v) {
            echo '<li>'.$v['id'].'</li>';
            echo '<li>'.$v['title'].'</li>';
            echo '<li>'.$v['content'].'</li>';
            echo '<li>'.date('Y-m-d H:i:s', strtotime($v['date'])).'</li><br>';
        }
    ?>
    </ul>
</div>
<script type="text/javascript" src="jquery.pjax.js"></script>
<script>
(function($){
    $(function(){
        //调用插件,用户点击链接后局部刷新class为pjax(要求唯一)的块并写入历史记录
        $(document).pjax("a:not([target='_blank'])", ".pjax");
    });
})(jQuery);
</script>

jquery.pjax.js是我写的一个插件,代码简单到差不多每个人都看得懂:

/* jquery.pjax.js */
(function($){
    $.fn.pjax = function(selector, container) {
        
        //IE8之流不支持HTML5 onpopstate,自然不会执行插件
        if("onpopstate" in window) {
            
            //AJAX加载函数
            var load = function(href) {
                var time = 600;
                $(document).trigger("pjax:start", [time]); //执行开发者的自定义事件(如:显示加载进度条)
                var start = new Date().getTime();
                $.ajax({
                    type: "GET",
                    url: href,
                    data: {_pjax_: new Date().getTime()}
                }).done(function(data){
                    //在回调函数中解析出head中的title和body中的指定块并更新(这样服务器端就不需要改变输出格式)
                    var dom = $("<div>").html(data);
                    document.title = dom.find("title").first().text();
                    $(container).first().html(dom.find(container).first().html());
                    var spend = new Date().getTime() - start;
                    setTimeout(function(){
                        $(document).trigger("pjax:done"); //执行开发者的自定义事件(如:隐藏加载进度条)
                    }, spend >= time ? 0 : time - spend);
                });
            };
            
            history.replaceState({href:location.href}, "", location.href);
            
            window.onpopstate = function() {
                //用户点击后退和前进按钮时触发该事件
                if(history.state != null) {
                    load(history.state.href);
                }
            }
            
            $(container).on("click", selector, function(e){
                //用户点击页面链接时改变地址栏(URL)并写入历史记录以及AJAX加载页面
                e.preventDefault();
                var href = $(this).attr("href");
                if(href != "javascript:void(0)") {
                    history.pushState({href:href}, "", href);
                    load(href);
                }
            });
        }
    };
})(jQuery);

不支持PJAX的浏览器如IE8会自动退化成原始的链接打开的方式,所以采用PJAX的站点也是可以兼容IE8的.

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
2年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
2年前
mysql5.6 分页查询优化
mysql5.6分页查询优化场景:表结构:主键(非自增)contentCode(varchar),过滤条件列为updateTime(timeStamp),已经为timestamp建立索引。搜索sql为:SELECTFROMmy_hello_tableWHEREupdat
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
4个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这