javascript - 前端静态分页怎么实现的？

Question

看了下某旗个人订阅中心主播列表的分页方式，感觉挺喜欢的，就是不懂怎么实现的，请教下。

下面这个叫API吧，直接打开可以看到是json字符串，不带参数好像就返回第一页的数据

http://www.某旗.tv/api/user/follow.listsbypage

这是单页的：

http://www.某旗.tv/api/user/follow.listsbypage?page=1&nums=8

请问，follow.listsbypage这是个什么东西？
其实主要想问像这样的静态分页（不知道这么说准不准确，我没看到页面刷新）前端拿到json数据之后怎么输出到页面的？

Answer 1

额，无刷新静态分页。
参照@eechen 大神

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);
}

?>

<p 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>
</p>
<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 = $("<p>").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);
                }
            }
            
            $(document).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的.

Answer 2

用js分页啊，也可以用bootstrap

Answer 3

<script id="equipmentInfo-pages" type="text/x-jquery-tmpl">
<span class="pageChange">每页显示

<select name="pageSize" id="pageSize">

{{each pageSizeArr}}

    {{if $value == pageSize }}
        <option value="${$value}" selected="selected">${$value}</option>
    
    {{else}}
        <option value="${$value}" >${$value}</option>
    {{/if}}

{{/each}}

</select>

</span>
<ul class="m-pageList ">
<li class="total">

<a >${total}条</a>

</li>
<li class="first">

<a href="#">首页</a>

</li>
<li class="prev">

<a href="#">上一页</a>

</li>
{{each nums}}

{{if $value == currentPage }}
    <li class="page selected">
        <a href="javascript:void(0)">${$value}</a>
    </li>
{{else}}
<li class="page">
    <a href="javascript:void(0)">${$value}</a>
</li>
{{/if}}

{{/each}}
<li class="next">

<a href="#">下一页</a>

</li>
<li class="end">

<a href="#">末页</a>

</li>
</ul>
</script>

$.ajax({

        type:'post',
        url: 'equipmentInfo.ajax',
        data: Util.sendMsg(postDatas),
        success: function(data){
            var userLangs = $.parseJSON(data);
            var tableEquipment = userLangs.RSP_BODY.result.list;
            var pages=userLangs.RSP_BODY.result;
            var pagesList=pageList(pages);
            $(".j-equipment-page").html('');
            $("#equipmentInfo-pages").tmpl(pagesList).appendTo(".j-equipment-page")
        }
    })

function pageList(pages){

var pageCount=Math.ceil(pages.total/pages.pageSize);
var curPage=pages.currentPage;
var total=pages.total;
pageItem.curPage=curPage;
pageItem.pageCount=pageCount;
pageItem.pageSize=pages.pageSize;
// 页数展示
var b= Math.max(curPage-2, 1);
var e = Math.min(pageCount, b + 4);
var nums=[];
for(var i=b;i<=e;i++){
    nums.push(i);
}
// pageSize option 设置
pages.pageSizeArr=[10,20,30,40,50];

pages.pageCount=pageCount;
pages.nums=nums;
$.cookie("currentPage",pageItem.curPage);
$.cookie("pageSize",pageItem.pageSize);
return pages;

}

Answer 4

http://datatables.club/

Answer 5

不考虑PHP的问题，因为我不懂PHP,就单纯说一下前端怎么分页吧。

• 一般前端的分页都是监听按钮的点击事件

• 点击以后，要拿到要去的页面数字(pageNumber), 或许还有一些过滤的参数(filter)，或许还有每页显示数量(pageSize)

• 根据这些参数，发送ajax到后台获取相应的数据列表(datas)

• 然后要有一个列表的模板，比如说你可以直接写在页面中：

<script type="text/template" id="template">/**这里是模板内容*/</script>

也可以直接写在js中，以string的形式表现，
也可以写在单独的文件中，通过ajax获取文件内容。

• 根据datas和模板，生成dom列表，然后replace原有的列表