javascript - 前端静态分页怎么实现的?
天蓬老师
天蓬老师 2017-04-11 11:20:57
[JavaScript讨论组]

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

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

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

这是单页的:

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

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

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

全部回复(3)
黄舟

js分页啊,也可以用bootstrap

PHP中文网

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

}

天蓬老师

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

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

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

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

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

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

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号